vue-cli3配置预渲染插件prerender-spa-plugin

作者: deepwinter 分类: 前端 发布时间: 2019-06-04 11:18 点击量: 560 次阅读

原创文章,转载请注明出处,谢谢!


什么情况下用预渲染

如果你调研服务器端渲染(SSR)只是用来改善少数营销页面(例如/, /about, /contact等)的SEO,那么你可能需要预渲染。无需使用web服务器实时动态编译HTML,而是使用预渲染方式,在构建时(build time)简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单,并可以将你的前端作为一个完全静态的站点。


prerender-spa-plugin插件的使用

安装

npm i prerender-spa-plugin -D

vue-cli3的webpack配置

vue.config.js中:

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      return {
        plugins: [
          new PrerenderSPAPlugin({
            // 生成文件的路径,也可以与webpakc打包的一致。
            // 下面这句话非常重要!!!
            // 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。
            staticDir: path.join(__dirname, './dist'),
            // 需要进行预渲染的路由路径
            // 对应自己的路由文件,比如index有参数,就需要写成 /index/param1。
            routes: ['/', '/step1', '/step2'],
            // 这个很重要,如果没有配置这段,也不会进行预编译
            renderer: new Renderer({
              //等待5秒后渲染页面
              renderAfterTime: 5000
            })
          })
        ]
      }
    }
  }
}

其中renderAfterTime:5000表示加载页面5秒后渲染HTML,也有其他的选项,比如renderAfterDocumentEvent表示使用事件触发渲染,renderAfterElementExists表示使用页面元素触发渲染。
以上是最基础的配置项,如果有更多的需求配置项,可以去github上查看文档,文档中也有很详细的介绍。

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注