今天公司考虑seo设计方案，服务端渲染（ssr）和 预渲染的方式，不过只是打算对几个简单的页面seo，所以选择了使用预渲染的方式，以下是实现过程中遇到的问题，供大家查看，有不对的地方请指正：
使用prerender-spa-plugin,官网文档说是必须使用history模式
1.history模式遇到的问题:
a.刷新页面出现空白
按照vue-router官方文档调整nginx，
location / {
try_files $uri $uri/ /index.html;
}
然后调整router/index.js ,添加 base:'/'
const router = new VueRouter({
mode: 'history',
base:'/',
routes: routes
});
最好修改config/index.js 中的build部分的 assetsPublicPath: '/',
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
....
因为我们是把打包发布后的程序放在了根目录下，所以base 和 assetsPublicPath 都写了 / ,如果网站访问形式是 http://www.XXX.com/web ,则需要把 / 该为 /web/ ,否则访问不到内容
b.请求首页数据没有问题，可是请求二级页面时接口获取数据错误，查看原因是请求路径是相对路径的原因，我们用的是axios,只需要把axios的baseurl改为绝对路径即可
2.安装prerender-spa-plugin遇到的问题
a.安装有的时候会出现安装失败的情况，建议用淘宝镜像安装 cnpm i prerender-spa-plugin --save-dev
b.安装后异步数据不出现，解决办法加延时 和 跨域 处理；
webpack.prod.conf.js：
...
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer ...
plugins: [
// 在vue-cli生成的文件的基础上，只有下面这个才是我们要配置的
new PrerenderSPAPlugin({
// 生成文件的路径，也可以与webpakc打包的一致。
// 下面这句话非常重要！！！
// 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
staticDir: path.join(__dirname, '../dist'), // 对应自己的路由文件，如果index有参数，则prerender-spa-plugin不适用（官方文档有说明）
routes: ['/','/pages/Detail'], // Server configuration options.
server: {
// Normally a free port is autodetected, but feel free to set this if needed.
port: 80,
proxy:{
'/api': {
target: 'http://www.xxx.com',
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api': 'api' //需要rewrite重写的,
}
}
}
},
// 这个很重要，如果没有配置这段，也不会进行预编译
renderer: new Renderer({
// 触发渲染的时间，用于获取数据后再保存渲染结果
renderAfterTime: 10000,
// 是否打开浏览器，false 是打开。可用于 debug 检查渲染结果
headless: false })
}),
... ]
以下是注意点：
A. 预渲染不适用于 渲染路由过多 和 动态路由 （如/detail/参数），只是适用于几个简单的固定路由的情景（例如 /index /about /contact）
B.如果首页类似于今日头条(m.toutiao.com)类似的，估计也会不适用，因为它可能只会预渲染 第一个分类下的前10条..;而且只是每次打包的时候执行预渲染，如果打包后后台又发布新文章了，则会造成预渲染数据和后台数据不同步的问题；