1. 程式人生 > >Vue-cli使用prerender-spa-plugin外掛預渲染

Vue-cli使用prerender-spa-plugin外掛預渲染

使用prerender-spa-plugin外掛預渲染

眾所周知單頁面應用不利於SEO,為了解決這個問題網上所給出的2個解決方案
1、伺服器端渲染
2、預渲染

由於頁面較少,且預渲染相對於SSH比較簡單,於是選擇預渲染頁面,預渲染可以極大的提高網頁訪問速度。而且配合一些meat外掛,基本可以滿足SEO需求。
說明:使用這種方式,路由需要設定History 模式
第一步:安裝prerender-spa-plugin,在build/prod中新增如下程式碼

第二步:在main.js中新增如下程式碼

第三步:index.html中引入靜態資源把 ./ 改成 /,/是根目錄(就是域名),./是當前目錄(瀏覽器地址)

第四步:執行npm run build命令,大功告成。需要登入的頁面是渲染不出來的,不可能根據每個使用者生成一個html