接下来我们以 Vue SSR 的官方文档为参考，来学习一下它的基本用法。

渲染一个 Vue 实例

目标：

  • 了解如何使用 VueSSR 将一个 Vue 实例渲染为 HTML 字符串

首先我们来学习一下服务端渲染中最基础的工作：模板渲染。
说白了就是如何在服务端使用 Vue 的方式解析替换字符串。
在它的官方文档中其实已经给出了示例代码，下面我们来把这个案例的实现过程以及其中含义演示一下。

  1. mkdir demo01
  3. cd demo01
  5. npm install vue vue-server-renderer

demo01/index.js：

  1. // 第 1 步：创建一个 Vue 实例
  2. const Vue = require("vue");
  3. const app = new Vue({
  4.   template: `<div>{{ message }}</div>`,
  5.   data: {
  6.     message: "Hello World",
  7.   },
  8. });
  10. // 第 2 步：创建一个 renderer
  11. const renderer = require("vue-server-renderer").createRenderer();
  13. // 第 3 步：将 Vue 实例渲染为 HTML
  14. renderer.renderToString(app, (err, html) => {
  15.   if (err) throw err;
  16.   console.log(html);
  17.   // => <div data-server-rendered="true">Hello World</div>
  18. });
  20. // 在 2.5.0+，如果没有传入回调函数，则会返回 Promise：
  21. renderer
  22.   .renderToString(app)
  23.   .then((html) => {
  24.     console.log(html);
  25.   })
  26.   .catch((err) => {
  27.     console.error(err);
  28.   });

与服务器集成

在 Node.js 服务器中使用时相当简单直接，例如 Express。
首先安装 Express 到项目中：

  1. npm i express

然后使用 Express 创建一个基本的 Web 服务：

  1. const express = require("express");
  2. const app = express();
  4. app.get("/", (req, res) => {
  5.   res.send("Hello World!");
  6. });
  8. app.listen(3000, () => console.log("app listening at http://localhost:port"));

启动 Web 服务：

  1. nodemon index.js

在 Web 服务中渲染 Vue 实例：

  1. const Vue = require("vue");
  2. const server = require("express")();
  3. const renderer = require("vue-server-renderer").createRenderer();
  5. server.get("*", (req, res) => {
  6.   const app = new Vue({
  7.     data: {
  8.       url: req.url,
  9.     },
  10.     template: `<div>访问的 URL 是： {{ url }}</div>`,
  11.   });
  13.   renderer.renderToString(app, (err, html) => {
  14.     if (err) {
  15.       res.status(500).end("Internal Server Error");
  16.       return;
  17.     }
  18.     res.end(`
  19.       <!DOCTYPE html>
  20.       <html lang="en">
  21.         <head>
  22.           <title>Hello</title>
  23.           <meta charset="UTF-8">
  24.         </head>
  25.         <body>${html}</body>
  26.       </html>
  27.     `);
  28.   });
  29. });
  31. server.listen(8080);

使用一个页面模板