简易的服务端渲染

基础的服务端渲染需要安装几个比较重要的模块

npm i vue vue-server-renderer express

在根路径下创建文件 server.js

简易的服务端

首先需要构建一个简易的服务器，因为是服务端渲染，所以需要在服务端返回 html 代码

// server.js
const server = require('express')()
// 当浏览器请求该地址时返回信息
server.get('/', (req, res) => {
  // 在这里返回 html 代码到浏览器中
})

// 监听端口
server.listen(3000, () => {
  console.log('server is running at 3000')
})

在服务端构建 html 代码

构建 html 代码需要两个步骤：

实例化vue
通过 vue-server-renderer 将 vue实例渲染为 html 字符串

// 获取渲染器，用于将 vue 实例渲染为 html代码
// 使用服务端渲染返回
const Vue = require('vue')
const server = require('express')()

// 渲染器，用于将 vue 渲染为 html 代码
const renderer = require('vue-server-renderer').createRenderer()

server.get('/', (req, res) => {
  // 实例化 vue
  const app = new Vue({
    data: {
      url: req.url
    },
    template: `<div>访问的 URL 是： {{ url }}</div>`
  })

  // 通过 renderer 将 app 实例渲染成 html
  renderer.renderToString(app, (err, html) => {
    if (err) {
      res.status(500).end('Internal Server Error')
      return
    }
    // 将编译后的 html 代码 返回到浏览器
    res.end(html)
  })
})

// 监听端口
server.listen(3000, () => {
  console.log('server is running at 3000')
})

HTML模板

通过 vue实例编译的 html 代码仅包含 body 部分的，所以我们还需要 html页面的部分，如 html标签和 head标签

index.template.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>document</title>
</head>
<body>
  <!--vue-ssr-outlet-->
</body>
</html>

server.js

const fs = require('fs')

// 定义模板
const renderer = require('vue-server-renderer').createRenderer({
  template: fs.readFileSync('./index.template.html', 'utf-8')
})

 是必须且不可修改的，他是用于标识 vue实例编译的代码需要插入的地方。也就是说，未来 renderer 编译后的 html 代码将会替换  标签

模板中使用插值

如果我们希望在模板中使用外部数据，可以通过插值表达式来实现