vue-ssr(三)
创建server-entry.js 服务端入口
![](https://img2020.cnblogs.com/blog/1520288/202107/1520288-20210705104238034-1725098887.png)
创建服务端的打包配置
在build下创建webpack.server.js文件夹
在public在创建一个服务端需要的模板
![](https://img2020.cnblogs.com/blog/1520288/202107/1520288-20210705104238242-544018214.png)
webpack.server.js
![](https://img2020.cnblogs.com/blog/1520288/202107/1520288-20210705104238281-1933986820.png)
注:与客户端的打包配置类似,只是入口名和所用的模板不一样,且服务端所用的模板内必须有<!--vue-ssr-outlet-->。要指定target和output
排除server模块
![](https://img2020.cnblogs.com/blog/1520288/202107/1520288-20210705104238189-1400962231.png)
服务端模板不引用打包出来的模块
重新在package.json里配置脚本
![](https://img2020.cnblogs.com/blog/1520288/202107/1520288-20210705104238191-1784039970.png)
服务端打包不需要打包环境
客户端打包结果
![](https://img2020.cnblogs.com/blog/1520288/202107/1520288-20210705104238275-257384062.png)
服务端打包结果
![](https://img2020.cnblogs.com/blog/1520288/202107/1520288-20210705104237795-1009725077.png)
把服务端打包的server.bundle.js挂载到服务端的模板html
![](https://img2020.cnblogs.com/blog/1520288/202107/1520288-20210705104238296-798022209.png)
页面中的dom结构
![](https://img2020.cnblogs.com/blog/1520288/202107/1520288-20210705104238211-890803459.png)
事件并没有生效,所以要把客户端打包结果挂载到服务端打包出的模板上,因为客户端打包出的结果里有点击事件
![](https://img2020.cnblogs.com/blog/1520288/202107/1520288-20210705104238183-1542277805.png)
![](https://img2020.cnblogs.com/blog/1520288/202107/1520288-20210705104238049-679170713.png)
![](https://img2020.cnblogs.com/blog/1520288/202107/1520288-20210705104238050-181936208.png)
会先去配置的静态文件地址里找静态资源
客户端激活
此时点击事件还是不生效,因为模板里压根就没有#app的dom,所以没有挂载上,所以要进行客户端激活
![](https://img2020.cnblogs.com/blog/1520288/202107/1520288-20210705104238265-531909424.png)
以上方式有弊端,预知最优方式如何,且听下回分解
博主掘金技术社区地址——https://juejin.cn/user/1908407918660871/posts