Vueサーバーサイドレンダリング：アプリケーションが再水和されず、エラーがスローされない

Question

私は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/'); 
}); 

Answer 1

私はそれを考え出した：この場合には、問題がcontentMarkerは引用符なし、<div id=app></div>されている必要がありますということでした：HTMLはWebPACKので縮小されていました。

これは、レイアウトファイル全体が出力された後、レンダリングされたVueテンプレートが表示されるためです。つまり、Vue JSがテンプレートの前にロードされていたため、再水和するドキュメントがありませんでした。

警告が役に立つかもしれません。