服務端渲染VS預渲染
1.服務端渲染：將完整的 html 輸出到客戶端，又被認為是‘同構’或‘通用’
?????? 點：首次渲染快（無需等待所有js都完成下載）利于SEO雏节，節(jié)能
?????? 缺點：開發(fā)受限
?????????需要處于Node.js server運行環(huán)境困肩；
?????????更多的服務器負載（占用更大的CPU資源）
2.預渲染：對特定路由生成靜態(tài)HTML文件诡宗，前端作為一個完全靜態(tài)的站點
?????無需使用web服務器實時動態(tài)編譯HTML
?????改善少數頁面的SEO,可采用預渲染
?????若網站有成百上千條路線，預編譯會非常緩慢（此情況慎用）
預渲染
必須是history模式哦
1.核心插件
npm install prerender-spa-plugin --save-dev
2.在build/webpack.prod.conf.js中進行配置
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
plugins: [
new PrerenderSPAPlugin({
//生成文件的路徑狡孔，這個目錄只能有一級害捕。
staticDir: path.join(__dirname, '../dist'),
//必需，要渲染的路由文件墨叛。
routes: ['/', '/index'],
//必須止毕，要使用的實際渲染器，沒有則不能預編譯
renderer: new Renderer({
inject: {
foo: 'bar'
},
//等待渲染漠趁，直到檢測到指定元素扁凛。
//例如，在項目入口使用`document.dispatchEvent(new Event('custom-render-trigger'))`
renderAfterDocumentEvent: 'render-event',
headless: false //渲染時顯示瀏覽器窗口闯传。對調試很有用谨朝。
})
})
]
3.main.js中進行配置
new Vue({
el: '#app',
router,
store,
components: {
App
},
template: '<App/>',
mounted() {
document.dispatchEvent(new Event('render-event'));
}
})
4.打包cnpm run build，搭建node本地服務跑起來或者 在線上（后臺需要重定向）
5.上圖
配置前
配置后
完美結束甥绿，這個提高了SEO字币！
原文作者：匆匆那年_海，博客主頁：http://www.reibang.com/u/910c0667c515
95后前端漢子共缕，愛編程洗出、優(yōu)秀、聰明图谷、理性翩活、沉穩(wěn)阱洪、智慧的程序猿一枚。
