写一个vue项目肯定是不会这样写,下面来看一下vue项目中使用ssr
基础
![](https://img2020.cnblogs.com/blog/1520288/202107/1520288-20210705104115741-248950827.png)
创建webpack.config.js
安装:
![](https://img2020.cnblogs.com/blog/1520288/202107/1520288-20210705104115592-1291341540.png)
注:其中比较特别的是vue-style-loader 这个包可以支持服务端渲染,其它功能和style-loader一样
![](https://img2020.cnblogs.com/blog/1520288/202107/1520288-20210705104115769-606570581.png)
![](https://img2020.cnblogs.com/blog/1520288/202107/1520288-20210705104115696-995667544.png)
![](https://img2020.cnblogs.com/blog/1520288/202107/1520288-20210705104115653-1424258056.png)
![](https://img2020.cnblogs.com/blog/1520288/202107/1520288-20210705104115621-864189904.png)
![](https://img2020.cnblogs.com/blog/1520288/202107/1520288-20210705104115661-416736011.png)
npx webpack-der-server 启动
改造
创建client-entry.js 客户端入口
它负责引入main main需要提供vue的实例
改造main.js
![](https://img2020.cnblogs.com/blog/1520288/202107/1520288-20210705104115865-1864873138.png)
client-entry.js
![](https://img2020.cnblogs.com/blog/1520288/202107/1520288-20210705104115645-1974959950.png)
修改webpack打包入口地址
![](https://img2020.cnblogs.com/blog/1520288/202107/1520288-20210705104116886-1491723336.png)
改造webpack文件夹
创建build文件夹:
客户端和服务端的webpack打包肯定有一些公共的,那么要抽离出来
创建webpack-base.js、创建webpack.client.js
- 因为客户端和服务端用的模板html不是一个,所以要把html-webpack-plugin抽离出去,移入到webpack.client.js
- 因为客户端和服务端的打包入口不是一个,所以要把打包入口抽离出来
webpack-base.js:
![](https://img2020.cnblogs.com/blog/1520288/202107/1520288-20210705104116882-1920773523.png)
![](https://img2020.cnblogs.com/blog/1520288/202107/1520288-20210705104115599-276422379.png)
注:输出的output的filename要根据服务端和客户端的入口名字动态生成,path也要改成../dist
webpack.client.js:
![](https://img2020.cnblogs.com/blog/1520288/202107/1520288-20210705104116885-1173330582.png)
注意入口名