cnpm install prerender-spa-plugin --save

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è)很重要，如果沒(méi)有配置這段，也不會(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({
? router,
? store,
? render: h => h(App),
? mounted () {
? ? document.dispatchEvent(new Event('render-event'))
? }
}).$mount('#app')

npm i prerender-spa-plugin -S

module.exports = {
	...,
	plugins: [
        staticDir: path.join(__dirname, 'dist'),
        routes:['/home'],
        renderer: new Renderer({
          inject: {
            foo: 'bar'
          },
          renderAfterDocumentEvent: 'render-event'
        })
	],
	// 另一種寫法   
	// config.pludaasdfgins.push(
      // new PrerenderSPAPlugin({
        // staticDir: path.join(__dirname, 'dist'),
        // indexPath: path.join(__dirname, 'dist', 'index.html'),
        // routes:['/home'],
        // renderer: new Renderer({
          // inject: {
          //   foo: 'bar'
          // },
          // headless: true,
          // renderAfterDocumentEvent: 'render-event'
        // })
      // })
    // )
}

npm run build