vue prerender-spa-plugin 預渲染解決seo問題

//vue.config.js
const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      console.log(process.env.NODE_ENV)
      return {
       plugins: [
        new PrerenderSPAPlugin({
          //要求-給的WebPack-輸出應用程序的路徑預渲染。
          staticDir: path.join(__dirname, './dist'),
          //必需，要渲染的路線。 
          routes: ['/productDetail'],
          //必須，要使用的實際渲染器，沒有則不能預編譯 
          renderer: new Renderer({
           inject: {
            foo: 'bar'
           },
           headless: false, //渲染時顯示瀏覽器窗口。對調試很有用。 
           //等待渲染，直到檢測到指定元素。
           //例如，在項目入口使用`document.dispatchEvent(new Event('custom-render-trigger'))` 
          //  renderAfterDocumentEvent: "render-event",
          //  renderAfterTime: 5000
          })
         })
       ]
      }
     } else {
      return;
     }
  },

　　

//main.js
new Vue({
  router,
  store,
  render: (h) => h(App),
  mounted() {
    // document.dispatchEvent(new Event('render-event'))
    document.dispatchEvent(new Event('custom-render-trigger')) #這里是重點
   }
}).$mount('#app');

PS：踩坑

1、路由頁面前兩個頁面不能有懶加載。

2、cnpm i --save puppeteer   這個運行完第一步命令后再運行下此命令，容易安裝失敗；（[prerender-spa-plugin] Unable to prerender all routes!  我是為了解決這個報錯問題，每個人問題可能不一樣，其它問題我沒遇到，需要大家自己搜索解決）