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

Posted youji8

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-cil 服务端预渲染 prerender-spa-plugin相关的知识,希望对你有一定的参考价值。

众所周知单页面应用不利于SEO,为了解决这个问题网上所给出的2个解决方案
1、SSH服务器端渲染
2、预渲染
由于页面较少,且预渲染相对于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模式后打包上传服务器页面一刷新就空白
所以需要服务器支持
 
 
 
最后页面刷新后 报文件找不到,更改下config里面的打包文件路径
使用绝对路径
 
assetsPublicPath: ‘http://www.baidu.com/abc/‘,
 
 
 

以上是关于vue-cil 服务端预渲染 prerender-spa-plugin的主要内容,如果未能解决你的问题,请参考以下文章

服务端预渲染之Nuxt(介绍篇)

服务端预渲染之Nuxt - (爬坑篇)

ini 使用Prerender服务从Javascript页面/应用程序提供预渲染HTML的示例Nginx配置(https://github.com/collect

prerender.io 搜索引擎优化 部署成windows服务 实现开机自动开启服务

错误 [prerender-spa-plugin] - 无法预渲染所有路由

vue 项目预渲染(prerender-spa-plugin)