如果要渲染的页面有v-for来展示的列表数据什么的，则不推荐用，因为好像渲染不出来列表数据。
安装
执行npm i prerender-spa-plugin即可，但是如果不能够翻墙的话就会遇到一个坑。
prerender-spa-plugin插件是需要依赖puppeteer的，也就是谷歌出品的无头浏览器插件，这个插件会下载最新版的chromium(大约140M+），所以如果不能翻墙，下载的时候就报错了。
改动点
1.路由由hash改成history
一般改过去会有出现分支页面刷新404的情况，需要去Nginx修正，使得子页面刷新自动跳到主页面 或者其他方法。。
参考 www.jianshu.com/p/5714ec0b9… segmentfault.com/a/119000002…
2.生产配置文件
需要修改的就是webpack.prod.conf.js这个文件，一般在这文件中如果使用脚手架工具会有html-webpack-plugin的插件，如果有就不要动了，因为prereder的插件是需要这个插件生成的html作为模板的，只需要在html-webpack-plugin的配置后加上新的配置即可。
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const baseWebpackConfig = require('./webpack.base.conf')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
const webpackConfig = merge(baseWebpackConfig, {
plugins: [
// vue-cli生成的配置中就已有这个了，不要动
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
}),
// 在vue-cli生成的文件的基础上，只有下面这个才是我们要配置的
new PrerenderSPAPlugin({
// 生成文件的路径，也可以与webpakc打包的一致。
// 下面这句话非常重要！！！
// 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
staticDir: path.join(__dirname, '../dist'),
// 对应自己的路由文件，比如index有参数，就需要写成 /index/param1。
routes: ['/', '/index', '/skin', '/slimming', '/exercise', '/alPay', '/wxPay'],
// 这个很重要，如果没有配置这段，也不会进行预编译
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
renderAfterDocumentEvent: 'render-event'
})
})
]
3、main.js 入口文件中添加 document.dispatchEvent
new Vue({
el: '#app',
router,
store,
render: h => h(App),
/* 这句非常重要，否则预渲染将不会启动 */
mounted() {
document.dispatchEvent(new Event('render-event'))
}
})
4.打包npm run build
打包不用太久，除非上面出了什么差错，打包过程会跳出谷歌浏览器预渲染一遍
测试
1.安装 http server
npm i http-server -g // 全局安装
2、进入到dist目录
cd dist
3、启动本地服务器
http-server : 无法加载文件 C:\Users\xiao\AppData\Roaming\npm\http-server.ps1，因为在此系统上禁止运行脚本。有关详细信息，请 参阅 go.microsoft.com/fwlink/?Lin… 中的 about_Execution_Policies。 所在位置 行:1 字符: 1 如果出现这个错误，用管理员权限去cmd里执行即可
hs -o -p 9999 // 自动启动本地dist目录下的index.html
// 浏览器启动 127.0.0.1:9999 4、至此不出意外我们看到了浏览器端后端返回来了html文件，支持seo爬虫了
