vue-cli3.0预渲染prerender-spa-plugin

npm i prerender-spa-plugin --save
"prerender-spa-plugin": "^3.4.0"

在根目录下新建文件vue.config.js

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

configureWebpack: () => {
    if (process.env.NODE_ENV !== 'production') return;
    return {
      plugins: [
        new PrerenderSPAPlugin({
          // 生成文件的路径，也可以与webpakc打包的一致。
          // 下面这句话非常重要！！！
          // 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
          staticDir: path.join(__dirname, 'dist'),
   
          // 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
          routes: ['/', '/Login', '/Home'],
   
          // 这个很重要，如果没有配置这段，也不会进行预编译
          renderer: new Renderer({
            inject: {
              foo: 'bar'
            },
            headless: false,
            // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
            renderAfterDocumentEvent: 'render-event'
          })
        })
      ]
    };
  }

在main.js中添加

new Vue({
  router,
  store,
  render: h => h(App),
  mounted () {document.dispatchEvent(new Event('render-event'))}  //添加行
}).$mount('#app')

最后npm run build打包验证是否设置成功

运行npm run build，看一下生成的 dist 的目录里是不是有每个路由名称对应的文件夹。然后找个 目录里 的 index.html 用IDE打开，看文件内容里是否有该文件应该有的内容。有的话，就设置成功了