为我们的SSR程序添加热更新功能
2019-12-01

前沿

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

1、解决思路

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

vue-ssr-client-manifest.json

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

vue-ssr-server-bundle.json

主要记录了js文件的内容

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

通过该图,我们知道,既然要热更新,那 webpack dev server 肯定跑不了。

所以解决的步骤如下:

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

2、编码实现

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

2.1、 起一个webpack dev server 服务

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

npm run serve

2.2、获取webpack配置文件,并编译

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

// 1、webpack配置文件const webpackConfig = require("@vue/cli-service/webpack.config")

2.3、编译webpack配置文件,并监听文件修改

// 2、编译webpack配置文件const serverCompiler = webpack(webpackConfig)const mfs = new MemoryFS()// 指定输出到的内存流中serverCompiler.outputFileSystem = mfs// 3、监听文件修改,实时编译获取最新的 vue-ssr-server-bundle.jsonlet bundleserverCompiler.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.4、获取最新的 vue-ssr-client-manifest.json

// 4、获取最新的 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.5、结合各个步骤的核心后的最后代码

安装所需要的库

npm install webpack memory-fs concurrently -Dnpm install koa-router axios -S

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

// server/dev.ssr.jsconst 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")// 1、webpack配置文件const webpackConfig = require("@vue/cli-service/webpack.config")const { createBundleRenderer } = require("vue-server-renderer");// 2、编译webpack配置文件const serverCompiler = webpack(webpackConfig)const mfs = new MemoryFS()// 指定输出文件到的内存流中serverCompiler.outputFileSystem = mfs// 3、监听文件修改,实时编译获取最新的 vue-ssr-server-bundle.jsonlet bundleserverCompiler.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 } // 4、获取最新的 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.jsconst 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中。

那如何解决呢?

    node server将这些静态资源的请求代理到 webpack dev server中改变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,你会发现这个错误,

这是我们常见的不允许跨域的错误提示。

解决方式:

    配置 webpack dev server 允许跨域

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

重新 npm run dev ,然后访问 localhost:3000

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

3、优化

1、favicon的问题打开f12还是能看到有问题,

具体实现可以参考我的github代码

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

可以使用nodemon,或者pm2实现

4、总结

通过上一篇 通过vue-cli3构建一个SSR应用程序 和这篇文章,我们一步一步搭建起了基于vue-cli3的一个ssr应用程序,并添加了热更新的功能,在这期间也踩了很多坑。但是最终实现了之后,你会觉得这些付出都是值得的,因为这些都是自己的成长奠定基础。

如果有更好的实现方法,欢迎交流交流!

如果有不对的地方,欢迎指出!

5、源码

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

赞赏

, 1, 0, 9);