Vue.js SSR Step by Step (2) - 一个简单的同构DEMO

上一篇文章中介绍了如何从零开始搭建一个简单的 client-only webpack 配置。
接下来咱们在前面代码的基础上写一个简单的先后端同构的DEMO。

改写入口

当编写纯客户端(client-only)代码时，咱们习惯于每次在新的上下文中对代码进行取值。可是，Node.js 服务器是一个长期运行的进程。当咱们的代码进入该进程时，它将进行一次取值并留存在内存中。这意味着若是建立一个单例对象，它将在每一个传入的请求之间共享。

为了不状态单例，改写入口， Vue SSR 官方文档介绍的比较详细了，必定要去看一看。
建立对应的文件后，src 目录是这样的：

.
├── App.vue
├── app.js
├── assets
│   └── logo.png
├── entry-client.js
└── entry-server.js复制代码

改写 app.js 把里面建立 Vue 实例的部分改写一个工厂函数，用于建立返回 Vue 实例。

// app.js
import Vue from 'vue'
import App from './App.vue'

export function createApp () {
  const app = new Vue({
    render: h => h(App)
  })
  return app
}复制代码

// entry-client.js
import { createApp } from './app.js'

const app = createApp()
app.$mount('#app')复制代码

// entry-server.js
import { createApp } from './app.js'

export default context => {
  const app = createApp()
  return app
}复制代码

改写 webpack 配置

由于服务器渲染的配置和客户端的配置略有不一样，但其中有不少共用的配置，官方建议咱们使用三个不一样的配置文件：base、client、server， 经过 webpack-merge 插件来实现对 base 配置文件的覆盖和扩展。

build 目录下的文件目录
.
├── webpack.base.conf.js
├── webpack.client.conf.js
└── webpack.server.conf.js复制代码

再把以前 webpack.config.js 中的内容复制到 webpack.base.conf.js 中。在 webpack.server.conf.js 中加入 SSR 的 client 插件。

const webpack = require('webpack')
const path = require('path')
const merge = require('webpack-merge')
const baseConfig = require('./webpack.base.conf')
const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')

module.exports = merge(baseConfig, {
  plugins: [
    new VueSSRClientPlugin()
  ]
})复制代码

客户端的配置就完成了。server 端须要修改输入和输出的配置，还有 source-map 输出的格式，module 中 引入的 css 文件不打包到 module 中，增长 SSR 的 server 端插件。

const webpack = require('webpack')
const path = require('path')
const merge = require('webpack-merge')
const baseConfig = require('./webpack.base.conf')
const nodeExternals = require('webpack-node-externals')
const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')

module.exports = merge(baseConfig, {
  entry: './src/entry-server.js',
  output: {
    filename: 'server-bundle.js',
    libraryTarget: 'commonjs2' // 代码中模块的实现方式，Node.js 使用 commonjs2
  },
  target: 'node', // 指定代码的运行环境是 node
  devtool: '#source-map',
  externals: nodeExternals({
    whitelist: /\.css$/
  }),
  plugins: [
    new VueSSRServerPlugin()
  ]
})复制代码

而后在 package.json 中添加编译的命令：

"scripts": {
  "test": "",
  "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot --config build/webpack.client.conf.js",
  "server": "node server.js",
  "build": "rimraf dist && npm run build:client && npm run build:server",
  "build:client": "cross-env NODE_ENV=production webpack --config build/webpack.client.conf.js --progress --hide-modules",
  "build:server": "cross-env NODE_ENV=production webpack --config build/webpack.server.conf.js --progress --hide-modules"
},复制代码

运行 nom run build 在dist 目录里就会生成构建后的文件，而后把 index.html 修改成 indext.template.html 这个文件名随便，不改也行。dist 目录中有两个不同的文件，vue-ssr-client-manifest.json 和 vue-ssr-server-bundle.json。具体的使用方法和实现方式，文档写的很清楚，先去 Bundle Renderer 指引 · GitBook 看看。

server.js

而后在写一个简单 Node Server，我这里使用 Koa，其余的都是同样。server.js 的内容以下：

const Koa = require('koa')
const Vue = require('vue')
const { createBundleRenderer } = require('vue-server-renderer')
const path = require('path')
const fs = require('fs')
const serverBundle = require('./dist/vue-ssr-server-bundle.json')
const clientManifest = require('./dist/vue-ssr-client-manifest.json')
const app = new Koa()
const template = fs.readFileSync(path.resolve(__dirname, './index.template.html'), 'utf-8')
const renderer = createBundleRenderer(serverBundle, {
  basedir: path.resolve(__dirname, './dist'),
  runInNewContext: false,
  template,
  clientManifest
})

const renderToString = function (context) {
  return new Promise((resolve, reject) => {
    renderer.renderToString(context, (err, html) => {
      if (err) reject(err)
      resolve(html)
    })
  })
}

app.use(async ctx => {
  console.log(ctx.req.url)
  if (ctx.req.url === '/favicon.ico' || ctx.req.url === '/robots.txt') {
    ctx.body = ''
    return 
  }
  // 简单的静态文件处理
  if (ctx.req.url.indexOf('/dist/') > -1) {
    const urlpath = ctx.req.url.split('?')[0].slice(1)
    const filepath = path.resolve(__dirname, './', urlpath)
    ctx.body = fs.readFileSync(filepath)
    return
  }
  let html = ''
  try {
    html = await renderToString({})
  } catch(err) {
    ctx.throw(500, err)
  }
  ctx.body = html  
})

app.listen(3000)
console.log('Server listening on http://localhost:3000.')复制代码

运行 nom run server 就能够看到服务器渲染出来的页面了。

增长前端方法

这只是一个简单的静态页面，没有 js 方法动态建立一些内容，咱们再添加一些前端方法，看看渲染出来的页面中客户端 js 的运行是否是能够的。
修改 App.vue 文件：

<template>
  <div class="demo" id="app">
    <h1>Simple-webpack demo</h1>
    <p>这是一个简单的 Vue demo</p>
    <img src="./assets/logo.png" alt="">
    <p>测试一下 SSR</p>
    <p v-for="(text, index) in textArr" :key="index">{{ text }}</p>
    <button @click="clickHandler">新增一个行文字</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      textArr: []
    }
  },
  methods: {
    clickHandler () {
      this.textArr.push(`${this.textArr.length + 1}. 这是新增的文字。`)
    }
  }
}
</script>复制代码

而后再次构建整个工程，从新启动服务器。

Success！

简单的数据注入

好比渲染一个新闻页面，但愿网页的标题是页面直接渲染出来的？应该怎么作？Vue.js SSR 提供了方法，可以插入模板变量。只要在 index.template.html 中加入模板变量就能够像其余的后端模板同样插入数据。首先修改一下 index.template.html 中，增长 title 变量，<title>SSR demo - {{ title }}</title> 。
而后在 server.js 中的 renderToString方法中的第一个参数传入 { title: '第一个 SSR Demo'}。
最后再重启一下后台服务，以下图，咱们的页面标题变成了咱们定义的了。

若是还想更复杂的数据咱们只能用注入一个 window 全局变量了。这个时候咱们还没办法用组件的静态方法，经过后台服务去注入，由于咱们没有用到router，不知道app中的组件是否是已经实例化，没办法去获取组件里的静态方法。借鉴 SSR 官方中的 window.__INIT_STATE 的方式，先在 index.template.html 中 增长一个 script 标签加入模板变量，而后在 server.js 中传入数据，最后修改 App.vue 文件在 mounted 中判断获取这个变量，将变量赋值给组件的 data 属性中，具体的代码以下：

<!-- index.template.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>SSR demo - {{ title }}
  </title>
  <script> {{{ injectData }}} </script>
</head>
<body>
  <!--vue-ssr-outlet-->
</body>
</html>复制代码

// server.js
html = await renderToString({
  title: '第一个 SSR Demo',
  injectData: 'window.__INIT_DATA__ = ' + JSON.stringify({
    text: '这是服务器注入的数据。'
  }) 
})复制代码

<!-- App.vue -->
<template>
  <div class="demo" id="app">
    <h1>Simple-webpack demo</h1>
    <p>这是一个简单的 Vue demo</p>
    <img src="./assets/logo.png" alt="">
    <p>测试一下 SSR</p>
    <p> {{ serverData.text }}</p>
    <p v-for="(text, index) in textArr" :key="index">{{ text }}</p>
    <button @click="clickHandler">新增一个行文字</button>
  </div>
</template>

<script> export default { data () { return { textArr: [], serverData: '' } }, mounted () { this.serverData = window.__INIT_DATA__ }, methods: { clickHandler () { this.textArr.push(`${this.textArr.length + 1}. 这是新增的文字。`) } } } </script>复制代码

从新编译，重启服务后，页面上就会多一段文字了，以下图所示：

Success！
全部的代码都在这个上面 wheato/ssr-step-by-step

参考

Vue.js 服务器端渲染指南