vue-cil 服务端预渲染 prerender-spa-plugin

时间 2019-11-08

标签 vue cil 服务渲染 prerender spa plugin 繁體版

原文原文链接

众所周知单页面应用不利于SEO，为了解决这个问题网上所给出的2个解决方案
一、SSH服务器端渲染
二、预渲染
因为页面较少，且预渲染相对于SSH比较简单，因而选择预渲染页面，预渲染能够极大的提升网页访问速度。并且配合一些meat插件，基本能够知足SEO需求
下面就来简单介绍一下
在webpack.prod.conf html

 
  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/', 
  