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在模板之前被加载，所以没有文档可以重新水化。

不过警告可能有用！

Vue 服务器端渲染：应用程序没有被重新水化，没有抛出错误

Vue server-side rendering: app not being rehydrated, no error thrown

vue.js

serverside-javascript