Vue預(yù)渲染

獲得服務(wù)端渲染的優(yōu)點
對特定路由生成靜態(tài)HTML文件，前端作為一個完全靜態(tài)的站點
無需使用web服務(wù)器實時動態(tài)編譯HTML
改善少數(shù)頁面的SEO,可采用預(yù)渲染
若網(wǎng)站有成百上千條路線，預(yù)編譯會非常緩慢（此情況慎用）

vue-meta-info插件，網(wǎng)頁meta標簽

安裝：yarn add vue-meta-info

main.js中進行配置

import MetaInfo from 'vue-meta-info' 
Vue.use(MetaInfo)

在xxx.vue文件里配置

export default {
    // 這些代碼會轉(zhuǎn)成網(wǎng)頁的meta標簽里的內(nèi)容
    metaInfo: {
        title: '標題',
        meta: [
            {
                name: 'keywords',
                content: '關(guān)鍵字'
            },
            {
                name: 'description',
                content: '網(wǎng)頁描述'
            }
        ]
    }

預(yù)渲染核心：prerender-spa-plugin

安裝：yarn add prerender-spa-plugin

build/webpack.prod.conf.js中進行配置

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

// plugins插件里書寫
plugins: [
   new PrerenderSPAPlugin({
      // 生成文件的路徑，這個目錄只能有一級。若目錄層次大于一級，在生成的時候不會有任何錯誤提示，在預(yù)渲染的時候只會卡著不動
      staticDir: path.join(__dirname, '../dist'),
      // 對應(yīng)自己的路由文件
      routes: [ '/', '/home'],
      // html文件壓縮
      minify: {
        minifyCSS: true, // css壓縮
        removeComments: true // 移除注釋
      },
      // 若沒有這段則不會進行預(yù)編譯
      renderer: new Renderer({
        inject: {
          foo: 'bar'
        },
        headless: false,
        // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，兩者的事件名稱要對應(yīng)上。
        renderAfterDocumentEvent: 'render-event'
      })
    }),
]

main.js中進行配置

new Vue({
  el: '#app',
  router,
  store,
  //   components: { App },
  //   template: '<App/>'
  render:h=>h(App),
  mounted(){
      document.dispatchEvent(new Event('render-event'))
  }
})

注意：官方文檔上 路由模式必須為 history 。如果不設(shè)置history模式，也能運行和生成文件，每個index.html文件的內(nèi)容都會是一樣的。所以必須使用 history模式