基于vue-cli3的vue-ssr(三)

前两篇文章介绍了vue-ssr的一些项目文件的改造，今天终于轮到了我们的重头戏vue.config.js,同样的我们先看一下长什么样子

vue.config.js

首先是我们的vue-server-renderer这个webpack插件，它是官方提供的服务端渲染插件，这里我们用到了俩个部分server-plugin，client-plugin。
分别是服务端渲染插件，客户端渲染插件。这里我们做了以下几件事情：
1.入口文件处我们修改为动态匹配服务端或者客户端
2.将输出library的方式服务端改为commonjs2的方式（客户端采用默认方式）
3.在服务端打包中将所有节点模块接绑，采用require的方式保留（不包括css样式文件）
4.优化代码分包
5.根据env.plat动态引入服务端客户端渲染插件

到这里我们的配置文件就完成了，如过对配置文件不理解的可以查看
webpac配置，vue-cli3配置

配置讲完了，不得不提的还有npm script，同样先来瞅一瞅它长啥样

package.json

可以看到我们新加了bulid:server和build:win和server:ssr(服务启动命令)
我们可以看到在build:server的命令中，我们给process.env.plat传递了参数node，从而在vue.config.js采用服务端渲染的打包方式
build:win是结合了build:server和build的命令这里就不做详细说明。
我们最终执行的也是build:win命令

打包命令说完了我们瞅一瞅打包后的文件长啥样

dist

vue-ssr-server-bundle.json文件其实是npm run build:server生成的，它是一个基于路由的地址和对应路由组件的一个map结构，其他的文件都是npm run build生成的客户端文件，这里可能有人会问了为什么服务端代码还需要客户端渲染的文件，这个问题其实我们之前在讨论客户端数据预取的时候已经说明过了，其实这边和客户端数据预取的原因是一样的，不理解的可以去看上一篇博客。

到此我们的前端工作已经准备就绪，下一篇我们将在基于express的基础上完成vue-ssr的服务端内容。