基于vue-cli3 SSR 程序实现热更新功能

前沿

经过上一篇文章 经过vue-cli3构建一个SSR应用程序 咱们知道了什么是SSR，以及如何经过vue-cli3构建一个SSR应用程序。可是最后遗留了一些问题没有处理，就是没有添加开发时的热更新功能，难道要每次更新代码都要从新编译打包吗？显然不是很合理。那接下来咱们将为该SSR程序添加热更新的功能。

一、解决思路

咱们知道SSR程序每次打包编译完成后，都会生成这两个文件 vue-ssr-client-manifest.json 和 vue-ssr-server-bundle.json

• vue-ssr-client-manifest.json

主要记录了静态资源文件的配置信息

• vue-ssr-server-bundle.json

主要记录了js文件的内容

那如今的问题就是要解决如何在保存代码后，获取到最新的vue-ssr-client-manifest.json 和 vue-ssr-server-bundle.json这两个文件。

经过该图，咱们知道，既然要热更新，那 webpack dev server 确定跑不了。

因此解决的步骤以下：

1. 起一个webpack dev server 服务，暴露8080端口
2. 起一个webpack compiler 编译webpack配置文件，监听文件修改，实时编译获取最新的 vue-ssr-server-bundle.json
3. 经过webpack dev server 获取最新的 vue-ssr-client-manifest.json
4. 结合 vue-ssr-server-bundle.json 和 vue-ssr-client-manifest.json 渲染html页面返回给浏览器

二、编码实现

有了思路后，剩下的就是要思考如何经过代码实现了。

2.一、 起一个webpack dev server 服务

经过 npm run serve 咱们能很快的起一个webpack dev server 服务

npm run serve 
复制代码

2.二、获取webpack配置文件，并编译

经过阅读官方文档咱们知道webpack的配置文件在 /node_modules/@vue/cli-service/webpack.config.js 中

// 一、webpack配置文件
const webpackConfig = require('@vue/cli-service/webpack.config')
复制代码

2.三、编译webpack配置文件，并监听文件修改

// 二、编译webpack配置文件
const serverCompiler = webpack(webpackConfig)
const mfs = new MemoryFS()
// 指定输出到的内存流中
serverCompiler.outputFileSystem = mfs

// 三、监听文件修改，实时编译获取最新的 vue-ssr-server-bundle.json
let bundle
serverCompiler.watch({}, (err, stats) =>{
  if (err) {
    throw err
  }
  stats = stats.toJson()
  stats.errors.forEach(error => console.error(error) )
  stats.warnings.forEach( warn => console.warn(warn) )
  const bundlePath = path.join(
    webpackConfig.output.path,
    'vue-ssr-server-bundle.json'
  )
  bundle = JSON.parse(mfs.readFileSync(bundlePath,'utf-8'))
  console.log('new bundle generated')
})

复制代码

2.四、获取最新的 vue-ssr-client-manifest.json

// 四、获取最新的 vue-ssr-client-manifest.json
// 这边的 8080 是 dev server 的端口号
const clientManifestResp = await axios.get('http://localhost:8080/vue-ssr-client-manifest.json')
const clientManifest = clientManifestResp.data
复制代码

2.五、结合各个步骤的核心后的最后代码

安装所须要的库

npm install webpack memory-fs concurrently -D
npm install koa-router axios -S
复制代码

在项目根目录下 新建一个 server/dev.ssr.js，代码以下

// server/dev.ssr.js
const webpack = require('webpack')
const axios = require('axios')
const MemoryFS = require('memory-fs')
const fs = require('fs')
const path = require('path')
const Router = require('koa-router')
// 一、webpack配置文件
const webpackConfig = require('@vue/cli-service/webpack.config')
const { createBundleRenderer } = require("vue-server-renderer");

// 二、编译webpack配置文件
const serverCompiler = webpack(webpackConfig)
const mfs = new MemoryFS()
// 指定输出文件到的内存流中
serverCompiler.outputFileSystem = mfs

// 三、监听文件修改，实时编译获取最新的 vue-ssr-server-bundle.json
let bundle
serverCompiler.watch({}, (err, stats) =>{
  if (err) {
    throw err
  }
  stats = stats.toJson()
  stats.errors.forEach(error => console.error(error) )
  stats.warnings.forEach( warn => console.warn(warn) )
  const bundlePath = path.join(
    webpackConfig.output.path,
    'vue-ssr-server-bundle.json'
  )
  bundle = JSON.parse(mfs.readFileSync(bundlePath,'utf-8'))
  console.log('new bundle generated')
})
// 处理请求
const handleRequest = async ctx => {
  console.log('path', ctx.path)
  if (!bundle) {
    ctx.body = '等待webpack打包完成后在访问在访问'
    return
  }
  // 四、获取最新的 vue-ssr-client-manifest.json
  const clientManifestResp = await axios.get('http://localhost:8080/vue-ssr-client-manifest.json')
  const clientManifest = clientManifestResp.data

  const renderer = createBundleRenderer(bundle, {
    runInNewContext: false,
    template: fs.readFileSync(path.resolve(__dirname, "../src/index.temp.html"), "utf-8"),
    clientManifest: clientManifest
  });
  const html = await renderToString(ctx,renderer)
  ctx.body = html;
}
function renderToString(context,renderer) {
  return new Promise((resolve, reject) => {
    renderer.renderToString(context, (err, html) => {
      err ? reject(err) : resolve(html);
    });
  });
}

const router = new Router()

router.get("*", handleRequest);

module.exports = router
复制代码

新建一个 server/ssr.js，代码以下

// server/ssr.js
const Koa = require('koa')
const koaStatic = require("koa-static");
const path = require('path')

const resolve = file => path.resolve(__dirname, file);
const app = new Koa()

const isDev = process.env.NODE_ENV !== 'production'
const router = isDev ? require('./dev.ssr') : require('./server')

app.use(router.routes()).use(router.allowedMethods())
// 开放目录
app.use(koaStatic(resolve("../dist")));

const port = process.env.PORT || 3000;

app.listen(port, () => {
  console.log(`server started at localhost:${port}`);
});

module.exports = app
复制代码

修改package.json 添加几个执行脚本

// package.json scripts字段
"dev:serve": "cross-env WEBPACK_TARGET=node node ./server/ssr.js",
"dev": "concurrently \"npm run serve\" \"npm run dev:serve\" "
复制代码

执行 npm run dev 命令

npm run dev
复制代码

访问 localhost:3000 你会发现，仍是有问题。

静态资源的文件引用的是 node.js server 的服务的，即引用到了3000端口上去了，可是3000端口的服务并无这些静态资源文件， 这些静态资源文件在webpack dev server中。

那如何解决呢？

1. 修改node server将这些静态资源的请求代理到 webpack dev server中
2. 改变webpack的baseUrl，直接引用到webpack dev server中

很显然，第二种方式实现起来比较简单，那咱们就修改webpack的baseUrl配置

修改 vue.config.js

// vue.config.js
// 添加一个字段，若是是开发环境，就指定到webpack dev server中
baseUrl: isDev ? 'http://127.0.0.1:8080' : '',
复制代码

从新 npm run dev ,而后访问 localhost:3000

已经能正常访问了，那咱们试试 热更新的更新能不能实现，修改一段代码，

会发现 node server 会从新编译webpack配置文件，而后在看看浏览器有没有更新

你会发现浏览器仍是没能热更新内容，打开 F12，你会发现这个错误，

这是咱们常见的不容许跨域的错误提示。

解决方式：

1. 配置 webpack dev server 容许跨域

// vue.config.js 
// 添加一个 devServer的字段
devServer: {
    headers: {'Access-Control-Allow-Origin': '*'}
},
复制代码

从新 npm run dev ,而后访问 localhost:3000

是已经能实现热更新的了。

三、优化

一、favicon的问题 打开f12仍是能看到有问题

具体实现能够参考个人github代码

二、修改 server 端代码自动重启代码

能够使用nodemon，或者pm2实现

四、总结

经过上一篇 经过vue-cli3构建一个SSR应用程序 和这篇文章，咱们一步一步搭建起了基于vue-cli3的一个ssr应用程序，并添加了热更新的功能，在这期间也踩了不少坑。可是最终实现了以后，你会以为这些付出都是值得的，由于这些都是为本身的成长奠基基础。

若是有更好的实现方法，欢迎交流交流！

若是有不对的地方，欢迎指出！

五、源码

项目源码：vue-cli-ssr-example 欢迎 star

公众号

欢迎关注个人公众号“码上开发”，天天分享最新技术资讯。关注获取最新资源