vue 项目预渲染（prerender-spa-plugin）

$ npm install prerender-spa-plugin --save-dev

//版本
"prerender-spa-plugin": "^3.4.0",       
"vue": "^2.5.3",

vue.config.js

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
module.exports = {
  configureWebpack: config => {
    config.entry = ['babel-polyfill', './src/main.js']
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(
        new PrerenderSPAPlugin({
          staticDir: path.join(__dirname, 'dist'),
          routes: ['/home'], //路由地址
          // 这个很重要，如果没有配置这段，也不会进行预编译
          renderer: new Renderer({
            inject: {
              foo: 'bar'
            },
            headless: false,
            renderAfterDocumentEvent: 'render-event'
          })
        }),
      )
    }
  },
}

renderAfterDocumentEvent：等到事件触发去渲染，此处我理解为是Puppeteer获取页面的时机
renderAfterDocumentEvent 这个则很关键，这个是监听 document.dispatchEvent事件，决定什么时候开始预渲染。需要在钩子
函数中触发事件

main.js

new Vue({
  router,
  store,
  render: h => h(App),
  i18n,[图片上传中...(dist.png-59fde6-1596787517975-0)]

  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')

npm run build

dist.png