vue SSR 實(shí)現(xiàn)熱更新功能【轉(zhuǎn)】

前沿

通過上一篇文章 通過vue-cli3構(gòu)建一個(gè)SSR應(yīng)用程序 我們知道了什么是SSR，以及如何通過vue-cli3構(gòu)建一個(gè)SSR應(yīng)用程序。但是最后遺留了一些問題沒有處理，就是沒有添加開發(fā)時(shí)的熱更新功能，難道要每次更新代碼都要重新編譯打包嗎？顯然不是很合理。那接下來我們將為該SSR程序添加熱更新的功能。

1、解決思路

我們知道SSR程序每次打包編譯完成后，都會(huì)生成這兩個(gè)文件 vue-ssr-client-manifest.json 和 vue-ssr-server-bundle.json

  • vue-ssr-client-manifest.json

主要記錄了靜態(tài)資源文件的配置信息

  • vue-ssr-server-bundle.json

主要記錄了js文件的內(nèi)容

那現(xiàn)在的問題就是要解決如何在保存代碼后，獲取到最新的vue-ssr-client-manifest.json 和 vue-ssr-server-bundle.json這兩個(gè)文件。

image

通過該圖，我們知道，既然要熱更新，那 webpack dev server 肯定跑不了。

所以解決的步驟如下：

  1. 起一個(gè)webpack dev server 服務(wù)，暴露8080端口
  2. 起一個(gè)webpack compiler 編譯webpack配置文件，監(jiān)聽文件修改，實(shí)時(shí)編譯獲取最新的 vue-ssr-server-bundle.json
  3. 通過webpack dev server 獲取最新的 vue-ssr-client-manifest.json
  4. 結(jié)合 vue-ssr-server-bundle.json 和 vue-ssr-client-manifest.json 渲染html頁(yè)面返回給瀏覽器

2、編碼實(shí)現(xiàn)

有了思路后，剩下的就是要思考如何通過代碼實(shí)現(xiàn)了。

2.1、 起一個(gè)webpack dev server 服務(wù)

通過 npm run serve 我們能很快的起一個(gè)webpack dev server 服務(wù)

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配置文件，并監(jiān)聽文件修改


// 2、編譯webpack配置文件
const serverCompiler = webpack(webpackConfig)
const mfs = new MemoryFS()
// 指定輸出到的內(nèi)存流中
serverCompiler.outputFileSystem = mfs

// 3、監(jiān)聽文件修改，實(shí)時(shí)編譯獲取最新的 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.4、獲取最新的 vue-ssr-client-manifest.json

// 4、獲取最新的 vue-ssr-client-manifest.json
// 這邊的 8080 是 dev server 的端口號(hào)
const clientManifestResp = await axios.get('http://localhost:8080/vue-ssr-client-manifest.json')
const clientManifest = clientManifestResp.data

2.5、結(jié)合各個(gè)步驟的核心后的最后代碼

安裝所需要的庫(kù)

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

在項(xiàng)目根目錄下 新建一個(gè) 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')
// 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()
// 指定輸出文件到的內(nèi)存流中
serverCompiler.outputFileSystem = mfs

// 3、監(jiān)聽文件修改，實(shí)時(shí)編譯獲取最新的 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')
})
// 處理請(qǐng)求
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

新建一個(gè) 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 添加幾個(gè)執(zhí)行腳本

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

執(zhí)行 npm run dev 命令

npm run dev

訪問 localhost:3000 你會(huì)發(fā)現(xiàn)，還是有問題。

靜態(tài)資源的文件引用的是 node.js server 的服務(wù)的，即引用到了3000端口上去了，但是3000端口的服務(wù)并沒有這些靜態(tài)資源文件，
這些靜態(tài)資源文件在webpack dev server中。

image

那如何解決呢？

  1. 修改node server將這些靜態(tài)資源的請(qǐng)求代理到 webpack dev server中
  2. 改變webpack的baseUrl，直接引用到webpack dev server中

很顯然，第二種方式實(shí)現(xiàn)起來比較簡(jiǎn)單，那我們就修改webpack的baseUrl配置

修改 vue.config.js

// vue.config.js
// 添加一個(gè)字段，如果是開發(fā)環(huán)境，就指定到webpack dev server中
baseUrl: isDev ? 'http://127.0.0.1:8080' : '',

重新 npm run dev ,然后訪問 localhost:3000

image

已經(jīng)能正常訪問了，那我們?cè)囋?熱更新的更新能不能實(shí)現(xiàn)，修改一段代碼，

會(huì)發(fā)現(xiàn) node server 會(huì)重新編譯webpack配置文件，然后在看看瀏覽器有沒有更新

你會(huì)發(fā)現(xiàn)瀏覽器還是沒能熱更新內(nèi)容，打開 F12，你會(huì)發(fā)現(xiàn)這個(gè)錯(cuò)誤，

image

這是我們常見的不允許跨域的錯(cuò)誤提示。

解決方式：

  1. 配置 webpack dev server 允許跨域
// vue.config.js 
// 添加一個(gè) devServer的字段
devServer: {
    headers: {'Access-Control-Allow-Origin': '*'}
},

重新 npm run dev ,然后訪問 localhost:3000

image

是已經(jīng)能實(shí)現(xiàn)熱更新的了。

3、優(yōu)化

1、favicon的問題
打開f12還是能看到有問題

image

具體實(shí)現(xiàn)可以參考我的github代碼

2、修改 server 端代碼自動(dòng)重啟代碼

可以使用nodemon，或者pm2實(shí)現(xiàn)

4、總結(jié)

通過上一篇 通過vue-cli3構(gòu)建一個(gè)SSR應(yīng)用程序 和這篇文章，我們一步一步搭建起了基于vue-cli3的一個(gè)ssr應(yīng)用程序，并添加了熱更新的功能，在這期間也踩了很多坑。但是最終實(shí)現(xiàn)了之后，你會(huì)覺得這些付出都是值得的，因?yàn)檫@些都是為自己的成長(zhǎng)奠定基礎(chǔ)。

如果有更好的實(shí)現(xiàn)方法，歡迎交流交流！

如果有不對(duì)的地方，歡迎指出！

5、源碼

項(xiàng)目源碼：vue-cli-ssr-example 歡迎 star

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容