Vue服务器端渲染：应用程序没有被补水，没有抛出错误答案

【问题标题】：Vue server-side rendering: app not being rehydrated, no error thrownVue服务器端渲染：应用程序没有被补水，没有抛出错误
【发布时间】：2016-11-30 20:31:24
【问题描述】：

我的 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/');
});

【问题讨论】：

标签： vue.js serverside-javascript

【解决方案1】：

我想通了：在这种情况下，问题是 contentMarker 应该是 <div id=app></div>，没有引号：HTML 正在被 webpack 缩小。

不这样做的结果是输出了整个布局文件，然后是渲染的 Vue 模板：这意味着 Vue JS 是在模板之前加载的，所以没有文档可以重新水化。

不过，警告可能有用！

【讨论】：