解決SEO(Search Engine Optimization),首屏問題 , 頁面較少，且預渲染相對於SSR比較簡單，預渲染可以極大的提高網頁訪問速度。而且配合一些meat插件，完全可以滿足SEO需求。
Prerender服務需要有NodeJs環境支持，如果之前服務器環境沒有NodeJs需要先進行安裝。
安裝
npm install --save prerender-spa-plugin
prerender-spa-plugin中有puppeteer
可能會報錯
ERROR: Failed to download Chromium r515411! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOA
D" env variable to skip download.
此時可以試試淘寶鏡像安裝
cnpm install --save prerender-spa-plugin puppeteer
因為在執行安裝的過程中需要執行install.js，這里會下載Chromium,官網建議是進行跳過，我們可以執行 —ignore-scripts 忽略這個js執行。也可以通過設置環境變量set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1阻止下載 Chromium （因為封網，直接下載會失敗）
npm i --save puppeteer --ignore-scripts
配置
webpack.base.conf.js
module.exports = {
context: path.resolve(__dirname, '../'),
//entry: {app: './src/main.js'}
entry: {
app: ['babel-polyfill','./src/main.js']//babel-polyfill會仿效一個完整的 ES2015+ 環境，並意圖運行於一個應用中而不是一個庫/工具。
}
}
webpack.prod.conf.js
開始我這樣寫
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
module.exports = {
configureWebpack: config => {
if (process.env.NODE_ENV !== 'production') return;
return {
plugins: [
new PrerenderSPAPlugin({
// 生成文件的路徑，也可以與webpakc打包的一致。
// 下面這句話非常重要！！！
// 這個目錄只能有一級，如果目錄層次大於一級，在生成的時候不會有任何錯誤提示，在預渲染的時候只會卡着不動。
staticDir: path.join(__dirname,'dist'),
// 對應自己的路由文件，比如a有參數，就需要寫成 /a/param1。
routes: ['/', '/product','/about'],
// 這個很重要，如果沒有配置這段，也不會進行預編譯
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，兩者的事件名稱要對應上。
renderAfterDocumentEvent: 'render-event'
})
}),
],
};
}
}
在main.js中增加
new Vue({
router,
store,
render: h => h(App),
mounted () {
document.dispatchEvent(new Event('render-event'))
}
}).$mount('#app')
router.js 中設置mode: “history”
運行npm run build，看一下生成的 dist 的目錄里是不是有每個路由名稱對應的文件夾。然后找個 目錄里 的 index.html 用IDE打開，看文件內容里是否有該文件應該有的內容。有的話，就設置成功了，如果沒成功，照着上面的步驟再來一次！！！
//比如PrerenderSPAPlugin中的 routes: [ '/','/home/homePage']
就會生成下面這樣的路徑
`` bash
dist
│ ├── home
│ │ └── index.html
│ ├── homePage
│ └── index.html
├── index.html
└── static
結合管理頭部標簽插件vue-meta-info
main.js中加
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)
頁面的vue中加metaInfo信息
export default {
metaInfo: {
title: 'We Inc',
meta: [
{
name: 'keywords',
content: '關鍵字1,關鍵字2,關鍵字3'
},
{
name: 'description',
content: '這是一段網頁的描述'
}
]
}
}
就可以將關鍵字預渲染到html的頁面中去
渲染結束遇到的問題
一、Uncaught ReferenceError: webpackJsonp is not defined
發現是config/index.js
assetsPublicPath: '/', //路徑是/不是./
這里要強調一點如果你的assetsPublicPath設置成'www.xxx.com'，生成的html是沒有內容的而且插件vue-meta-info的設置的信息也不會加載出來
二、解決vuex requires a Promise polyfill in this browser問題
添加babel-polyfill插件
webpack.base.conf.js
module.exports = {
context: path.resolve(__dirname, '../'),
//entry: {app: './src/main.js'}
entry: {
app: ['babel-polyfill','./src/main.js']//babel-polyfill會仿效一個完整的 ES2015+ 環境，並意圖運行於一個應用中而不是一個庫/工具。
}
}