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

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打包的一致。
   // 下面這句話非常重要！??！
   // 這個(gè)目錄只能有一級(jí)，如果目錄層次大于一級(jí)，在生成的時(shí)候不會(huì)有任何錯(cuò)誤提示，在預(yù)渲染的時(shí)候只會(huì)卡著不動(dòng)。
   staticDir: path.join(__dirname,'dist'),
   // 對(duì)應(yīng)自己的路由文件，比如a有參數(shù)，就需要寫成 /a/param1。
   routes: ['/', '/product','/about'],
   // 這個(gè)很重要，如果沒有配置這段，也不會(huì)進(jìn)行預(yù)編譯
   renderer: new Renderer({
   inject: {
    foo: 'bar'
   },
   headless: false,
   // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，兩者的事件名稱要對(duì)應(yīng)上。
   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'))
 }
})