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目錄就知道成沒成功啦。 試了那麼多方法，這是惟一成功的一種。

完結，撒花。