1.外掛prerender-spa-plugin，vue-meta-info
2.prerender-spa-plugin外掛進行頁面的預渲染，vue-meta-info新增頁面title,keywords
3.安裝外掛
npm install prerender-spa-plugin --save
npm install vue-meta-info --save
複製程式碼4.vue.config.js配置
const prerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = prerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
configureWebpack: config => {
if(process.env.NODE_ENV !== 'production') return;
return {
plugins: [
new prerenderSPAPlugin({
/*編譯後的html需要存放的路徑*/
staticDir: path.join(__dirname,'dist'),
/*需要預渲染的路由路徑 頁面過多，可能導致預處理不成功，可分批次打包*/
routes: ['/',/smileTest','/product','/case','/contact','/about','/indications'],
renderer: new Renderer({
renderAfterDocumentEvent: "render-event",
/*渲染時顯示瀏覽器視窗。用於除錯。*/
headless: false,
inject:{
foo:'bar'
},
/*延時渲染 如果頁面有從介面獲取的資料，最好加上延時渲染*/
captureAfterTime: 5000
})
})
]
}
複製程式碼},
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)
new Vue({
router,
store,
render: h => h(App),
mounted() {
document.dispatchEvent(new Event('render-event')) //與vue.config.js（renderAfterDocumentEvent）事件一致
}
}).$mount('#app')
複製程式碼
export default {
metaInfo: {
title:'頁面title',
meta:[{
name: 'keywords',
content: '關鍵字'
}]
} ,
data(){
return{
}
}
}
複製程式碼
8.遇到的問題
因為我的專案是一個比較小的移動端的網站，幾乎沒有與後臺的資料互動,所以在進行預渲染時並沒有遇到很多問題，
除了打包時報 “Unable to prerender all routes!”（不能預渲染所有路由）,查詢各種資料並沒有找到特別好的
解決方法，只能選擇分批次打包。**如果有好的解決方法，望留言指導**
複製程式碼9.參考文件
官方文件
其他
blog.csdn.net/qq_42606051… www.cnblogs.com/tiedaweisha… blog.csdn.net/codeliuguis…