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! 我是为了解决这个报错问题，每个人问题可能不一样，其它问题我没遇到，需要大家自己搜索解决）