vue-ssr的实现原理连载（三）

上一节已经实现了一个基本的vue-ssr的版本，但是每次客户端和服务端打包完成后，都需要手动的在服务端的模板中添加客户端打包后的js不太现实，现在我们来解决这个问题。

vue-server-renderer 为我们提供了两个插件： client-plugin和 server-plugin ，分别在客户端打包和服务端打包的时候添加这两个插件会将客户端和服务端打包后的结果想胡关联，就能达到我们想要的效果，在webpack的客户端和服务端配置中分别引入这两个插件： 

build/webpack.client.js

const ClientRenderPlugin = require("vue-server-renderer/client-plugin");

module.exports = merge(base, {
   ....
   plugins: [
     new ClientRenderPlugin(),
     ...
   ] 
})

build/webpack.server.js

const ServerRenderPlugin = require("vue-server-renderer/server-plugin");

module.exports = merge(base, {
   ....
   plugins: [
     new ServerRenderPlugin(),
     ...
   ] 
})

　　然后重新打包各端 npm run client:build -- --watch    npm run server:build -- --watch   启动node服务  nodemon serve.js

这样打包完成，我们查看dist文件夹下，多了两个json文件： 分别是 vue-ssr-client.manifest.json 和 vue-ssr-server.bundle.json 。 客户端的配置文件描述了客户端打包出的所有的 bundle 的文件名和模块对应hash等信息，服务端的配置文件描述了服务端打包出文件的入口文件名和打包出的字符串结果。

　　接下来我们来修改下serve.js， 直接读取服务端的打包的配置文件作为ServerBundle并使用vue-server-renderer的createBundleRenderer(string, {template, manifest.json}) 来关联客户端和服务端打包完成的相互关联

serve.js

// 读取服务端打包完成的结果字符串已经通过 server-plugin写入 vue-ssr-server-bundle.json中，直接读取
const ServerBundle = require("./dist/vue-ssr-server-bundle.json");
// 读取模板
const template = fs.readFileSync("./dist/index.ssr.html", "utf8");
// 客户端 manifest.json 注意，名字必须固定，否则失败
const clientManifest = require("./dist/vue-ssr-client-manifest.json");
// 创建bundle渲染器, 进行渲染并插入模板
let render = VueServerRender.createBundleRenderer(ServerBundle, {
  template,
  // 渲染的时候，可以找到客户端的js文件，自动引入到html中
  clientManifest
});

　　然后浏览器刷新，事件执行，并且查看网页源代码，确实成功的引入了客户端打包的js。

　　本节源码可以查看我的github: https://github.com/Jasonwang911/vue-ssr/tree/master/step3

　　vue-ssr的实现原理连载（一）： https://www.cnblogs.com/jasonwang2y60/p/11299503.html      源码： https://github.com/Jasonwang911/vue-ssr/tree/master/step1

　　vue-ssr的实现原理连载（二）：https://www.cnblogs.com/jasonwang2y60/p/11300255.html       源码： https://github.com/Jasonwang911/vue-ssr/tree/master/step2