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服务器端呈现：应用程序未被重新水合，没有抛出错误

1 个答案: