vue-cil 服務端預渲染 prerender-spa-plugin

衆所周知單頁面應用不利於SEO，爲了解決這個問題網上所給出的2個解決方案
一、SSH服務器端渲染
二、預渲染
因爲頁面較少，且預渲染相對於SSH比較簡單，因而選擇預渲染頁面，預渲染能夠極大的提升網頁訪問速度。並且配合一些meat插件，基本能夠知足SEO需求
下面就來簡單介紹一下
在webpack.prod.conf

const PrerenderSpaPlugin = require('prerender-spa-plugin')

const webpackConfig = merge(baseWebpackConfig, {

plugins: [

　　new CopyWebpackPlugin([

　　{

　　 from: path.resolve(__dirname, '../static'),

　　 to: config.build.assetsSubDirectory,

　　ignore: ['.*']

　　}

　　]),

　　 new PrerenderSpaPlugin(

　　//將渲染的文件放到dist目錄下

　　 path.join(__dirname, '../dist'),

　　 //須要預渲染的路由信息

　　 [ '/','/index','/cjrl','/hqyc','/article','/subscribe'],

　　 // [ '/'],

　　{

　　//在必定時間後再捕獲頁面信息，使得頁面數據信息加載完成

　　captureAfterTime: 50000,

　　//忽略打包錯誤

　　ignoreJSErrors: true,

　　phantomOptions: '--web-security=false',

　　maxAttempts: 10,

　　}

),

 

]

})

因hash模式不能預渲染因此要改成history模式

 

mode:'history'

 

然而更改成history模式後打包上傳服務器頁面一刷新就空白

因此須要服務器支持

 

 

https://router.vuejs.org/zh-cn/essentials/history-mode.html

 

最後頁面刷新後 報文件找不到，更改下config裏面的打包文件路徑

使用絕對路徑

 

assetsPublicPath: 'http://www.baidu.com/abc/',