今天公司考慮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條..;而且只是每次打包的時候執行預渲染，如果打包后后台又發布新文章了，則會造成預渲染數據和后台數據不同步的問題；