new PrerenderSPAPlugin({
  staticDir: path.join(__dirname, '../dist'),//打包文件的路徑，或者自定義一個文件路徑
  routes: ['/test', '/'],//需要預渲染的route路徑
  renderer: new Renderer({
  inject: {
   foo: 'bar'
  },
  headless: true,
  renderAfterDocumentEvent: 'render-event'//需要在實例化Vue中監(jiān)聽的事件，名稱要相對應
  })
 })

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
module.exports = {
 configureWebpack: config => {
 if (process.env.NODE_ENV !== 'production') return;
 return {
  plugins: [
  new PrerenderSPAPlugin({
   // 生成文件的路徑，也可以與webpakc打包的一致。
   // 下面這句話非常重要！??！
   // 這個目錄只能有一級，如果目錄層次大于一級，在生成的時候不會有任何錯誤提示，在預渲染的時候只會卡著不動。
   staticDir: path.join(__dirname,'dist'),
   // 對應自己的路由文件，比如a有參數(shù)，就需要寫成 /a/param1。
   routes: ['/', '/product','/about'],
   // 這個很重要，如果沒有配置這段，也不會進行預編譯
   renderer: new Renderer({
   inject: {
    foo: 'bar'
   },
   headless: false,
   // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，兩者的事件名稱要對應上。
   renderAfterDocumentEvent: 'render-event'
   })
  }),
  ],
 };
 }
}

new Vue({
 el: '#app',
 router,
 components: { App },
 template: '<App/>',
 mounted() {
 // You'll need this for renderAfterDocumentEvent.
 document.dispatchEvent(new Event('render-event'))
 }
})