使用 Vue 和 Express 进行服务端渲染

Question

Vue 对 Node.js 中的服务器端渲染提供了可靠的支持 。 这意味着，给定一个 Vue 应用程序，您可以使用 vue-server-renderer 图书馆 。下面是使用 Express 。

const { renderToString } = require('vue-server-renderer').createRenderer();
const expressApp = require('express')();

expressApp.get('*', (req, res) => {
  const app = new Vue({
    // Initialize with data from the request.
    data: { content: req.query.content },
    template: '<div>{{content}}</div>'
  });
  renderToString(app).
    // Sends '<div data-server-rendered="true">Hello, World</div>'
    then(html => res.send(html)).
    catch(err => res.status(500).send(err.stack));
});

const server = await expressApp.listen(3000);

请注意， renderToString() 函数返回一个承诺。 确保您 处理错误 。

注意以上 div 有个 data-server-rendered 属性。 这 data-server-rendered 属性将此 div 标记为 客户端 hydration 。 换句话说，您可以使用 $mount()，使您的 Vue 客户端获取您的静态 HTML 并开始对客户端事件做出反应的功能。