原创文章，转载请注明出处，谢谢！

什么情况下用预渲染

如果你调研服务器端渲染(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上查看文档，文档中也有很详细的介绍。