Vue服務器端渲染：應用程序沒有被重新水化，沒有錯誤

我有一個工作Vue應用程序在我的dist目錄中：當服務器服務器，一切工作正常。Vue服務器端渲染：應用程序沒有被重新水化，沒有錯誤

當我嘗試使用vue-server-renderer添加服務器端渲染時，它不起作用。加載頁面，但沒有正確補充：大多數事件偵聽器尚未添加。

沒有錯誤發生。我正在使用獨立版本Vue 2.1.3和vue-server-renderer 2.1.3。 NODE_ENV是開發。

這裏是我的服務器代碼：

require('dotenv').config(); 

const fs = require('fs'); 
const path = require('path'); 

const layout = fs.readFileSync('./dist/index.html', 'utf8'); 

const contentMarker = '<div id="app"></div>'; 
const contentIndex = layout.indexOf(contentMarker); 
const layoutHead = layout.slice(0, contentIndex); 
const layoutTail = layout.slice(contentIndex + contentMarker.length); 

const express = require('express'); 
const server = express(); 

server.use('/static', express.static('./dist/static')); 

const bundle = fs.readFileSync('./dist/static/js/app.js', 'utf-8'); 
const renderer = require('vue-server-renderer').createBundleRenderer(bundle); 

server.get('*', (req, res) => { 
    res.setHeader('Content-Type', 'text/html'); 

    const renderStream = renderer.renderToStream({ url: req.url }); 

    renderStream.once('data',() => { 
    res.write(layoutHead); 
    }); 

    renderStream.on('data', chunk => { 
    res.write(chunk); 
    }); 

    renderStream.on('end',() => { 
    res.end(layoutTail); 
    }); 

    renderStream.on('error', err => { 
    if (err && err.code === '404') { 
     res.status(404).end('404 | Page Not Found'); 
     return; 
    } 

    res.status(500).end('500 Error'); 
    console.error(err); 
    }); 
}); 

server.listen(8080, (err) => { 
    if (err) { 
    throw err; 
    } 

    console.log('Server is running at http://localhost:8080/'); 
});

來源

2016-11-30 callumacrae

我想通了：在這種情況下，問題是，contentMarker應該已經<div id=app></div>，不帶引號：在HTML正在被精縮的WebPack。

不這樣做的結果是整個佈局文件被輸出，然後渲染Vue模板：這意味着Vue JS被加載到模板之前，所以沒有文檔來補充水分。

雖然警告可能有用！

來源

2016-11-30 12:31:24 callumacrae

Vue服務器端渲染：應用程序沒有被重新水化，沒有錯誤

回答

相關問題