Vue-Cli3.0怎么使用预渲染怎么配置prerender-spa-plugin

利用vue cli3 搭建项目，需要使用vue-meta-info 和 prerender-spa-plugin 来优化seo，但是在prerender-spa-plugin好像出了点问题，解决后总结一下方法。

---

安装

"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，不然不会执行预编译
  mounted() {
    document.dispatchEvent(new Event('render-event'));
  }
}).$mount('#app');
复制代码

---

最后

npm run build
复制代码

看一下dist目录就知道成没成功啦。 试了那么多方法，这是唯一成功的一种。

完结，撒花。

转载于:https://juejin.im/post/5c2ec4316fb9a04a03795949