vue利用prerender-spa-plugin预渲染

前端时间写一个vue官网，开发很顺利，但是发布之后，发现对于SPA项目seo很不友好，于是用到预渲染进行优化，顺便利用vue-meta-info编写每个页面的name、content等等。

一、安装

npm i prerender-spa-plugin --save -dev
npm i vue-meta-info

二、具体步骤：

1、修改router下index.js：hash模式改为history模式，路径加一层base
2、修改build下utils.js：注释publicPath

3、修改config下index.js：路径assetsPublicPath改为 ‘/’

4、配置webpack.prod.conf：


5、修改main.js

6、如果想利用vue-meta-info，配置如下
main.js引入：

在每个路由页面配置单独的metaInfo：

7、npm run build 打包：
生成如下多个页面：

看到单独的metaInfo也注入进去了

三、完成
根据以上步骤，正确配置完毕即可实现，如发现刷新后404，我的这个问题本地存在，部署到到服务器就不存在了。
如果涉及到发请求，配置一个serve代理就可以了，具体方案以后会补上。

四、链接
prerender-spa-plugin：https://www.npmjs.com/package/prerender-spa-plugin
vue-meta-info：https://www.npmjs.com/package/vue-meta-info