基於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

公衆號

歡迎關注個人公衆號「碼上開發」，天天分享最新技術資訊。關注獲取最新資源