Example of pre-rendering method for Vue single page application

npm install prerender-spa-plugin --save

const path = require('path')
const PrerenderSPAPlugin = require('prerender-spa-plugin') // Import plugin const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

plugins:[
	// Configure PrerenderSPAPlugin
    new PrerenderSPAPlugin({
      // The path of the generated file can also be consistent with the path packaged by webpakc.
      staticDir: path.join(__dirname, '../dist'),
      
      // Corresponding to your own routing file, for example, if index has parameters, you need to write it as /index/param1.
      routes: ['/', '/report','/genius','/index/param1'],
      // Must be written, if this section is not configured, precompilation will not be performedrenderer: new Renderer({
          inject: {
            foo: 'bar'
          },
          headless: false,
          // In main.js, document.dispatchEvent(new Event('render-event')), the event names of the two should correspond.
          renderAfterDocumentEvent: 'render-event'
      })
    })
]

new Vue({
  el: '#pingce',
  router,
  store,
  components: { App },
  template: '<App/>',
  // Add mounted, otherwise precompilation will not be executed mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
})

npm install prerender-spa-plugin --save

const PrerenderSPAPlugin = require('prerender-spa-plugin'); // Import plugin const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
const path = require('path');
module.exports = {
    configureWebpack: config => {
        if (process.env.NODE_ENV !== 'production') return;
        return {
            plugins: [
                new PrerenderSPAPlugin({
                    // The path of the generated file can also be consistent with the path packaged by webpakc.
                    // This directory can only have one level. If the directory level is greater than one level, there will be no error prompt during generation, and it will just get stuck during pre-rendering.
                    staticDir: path.join(__dirname,'dist'),
                    // Corresponding to your own routing file, for example, if about has parameters, you need to write it as /about/param1.
                    routes: ['/', '/product', '/about'],
                    //Must configure otherwise precompilation will not be performedrenderer: new Renderer({
                        inject: {
                            foo: 'bar'
                        },
                        headless: false,
                        // In main.js, document.dispatchEvent(new Event('render-event')), the event names of the two should correspond.
                        renderAfterDocumentEvent: 'render-event'
                    })
                }),
            ],
        };
    }
}

new Vue({
  router,
  store,
  render: h => h(App),
  // The name of renderAfterDocumentEvent in vue-config.js: 'render-event' must correspond to mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')