vue-cli项目搭建
在做准备工作的时候简单讲述了vue中使用ssr的运行思路，里面提及了一个很重要的webpack，因此这里需要借助vue-cli脚手架，直接更改原有的webpack就可以了，这样会方便很多。
这里建议大家返回顶部再次看一下vue服务端渲染的流程，在介绍中的client-bundle和server-bundle，，所以需要构建两个配置，分别是服务端配置和客户端的配置。
如想要实现服务端渲染需要对vue-cli中个js文件中的配置进行修改。以下只展示更改部分的代码，不展示全部。
文件分别是：
webpack.server.conf.js – 服务端webpack配置
dev-server.js – 获取服务端bundle
server.js – 创建后端服务
webpack.dev.conf.js – 客户端的bundle
webpack.base.conf – 修改入口文件
客户端配置
客户端生成一份客户端构建清单，记录客户端的资源，最终会将客户端构建清单中记录的文件，注入到执行的执行的模板中，这个清单与服务端类似，同样也会生成一份json文件，这个文件的名字是vue-ssr-client-manifest.json（项目启动以后可以通过地址/文件名访问到），当然必不可少的是，同样也需要引入一个叫做vue-server-renderer/client-plugin模块，作为webpack的插件供其使用。
首先要安装一下vue-server-render这个模块，这个是整个服务端渲染的核心，没有整个ssr是没有任何灵魂的。
npm install vue-server-render -S安装完成之后，首先要找到webpack.dev.conf.js，首先要对其进行相关配置。
webpack.dev.conf.js
// 添加引入 vue-server-render/client-plugin 模块
const vueSSRClientPlugin = require("vue-server-render/client-plugin");const devWebpackConfig = merge(baseWebpackConfig,{
plugins:[
new vueSSRClientPlugin()
]});
添加了这个配置以后，重新启动项目通过地址就可以访问到vue-ssr-client-manifest.json（http://localhost:8080/vue-ssr-client-manifest.json），页面中出现的内容就是所需要的client-bundle。
服务端配置
服务端会默认生成一个vue-ssr-server-bundle.json文件，在文件中会记录整个服务端整个输出，怎么才能生成这个文件呢？要在这个json文件，必须要引入vue-server-renderer/server-plugin,并将其作为webpack的插件。
在开始服务端配置之前，需要在src文件夹下面创建三个文件，app.js，entry-client.js，entry-server.js，创建完成之后需要对其写入相关代码。
src/router/index.js
import vueRouter from "vue-router";
import Vue from "vue";
import HelloWorld from "@/components/HelloWorld");Vue.use(vueRouter);
