vuejs 預渲染插件 prerender-spa-plugin 生成多頁面 -- SEO

前端vue等框架打包的項目一般爲SPA應用，而單頁面是不利於SEO的，現在的解決方案有兩種：

1、SSR服務器渲染
　  瞭解服務器渲染請進，這裏不做記錄。

2、預渲染模式
　  這比服務端渲染要簡單很多，而且可以配合 vue-meta-info 來生成title和meta標籤，基本可以滿足SEO的需求 
　  TIPS: 使用預渲染vue-router必須使用history模式

// 安裝
npm install prerender-spa-plugin --save

然後在webpack.prod.conf.js裏面添加：

// 頭部引入
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer

在plugins裏面添加：

new PrerenderSPAPlugin({
  // 生成文件的路徑，也可以與webpakc打包的一致。
  // 下面這句話非常重要！！！
  // 這個目錄只能有一級，如果目錄層次大於一級，在生成的時候不會有任何錯誤提示，在預渲染的時候只會卡着不動。
  staticDir: path.join(__dirname, '../dist'),

  // 對應自己的路由文件，比如a有參數，就需要寫成 /a/param1。
  routes: ['/', '/a', '/b', '/c', '/d'],

  // 預渲染代理接口
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:9018',
        secure: false
      }
    }
  },

  // 這個很重要，如果沒有配置這段，也不會進行預編譯
  renderer: new Renderer({
    inject: {
      foo: 'bar'
    },
    headless: false,
    // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，兩者的事件名稱要對應上。
    renderAfterDocumentEvent: 'render-event'
  })
}),

最後在main.js裏面修改：

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  // 添加mounted，不然不會執行預編譯
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
})

到這裏預編譯的配置修改就完成了，執行 npm run build 查看打包後的dist文件就會發現如下結構：

 

安裝 vue-meta-info 配置title和meta：

npm install vue-meta-info --save

在main.js引入：

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

在vue頁面中配置：

<script>
export default {
  // 配置title和meta數據
  metaInfo: {
    title: '我是一個title',
    meta: [
      {
        name: 'keywords',
        content: '關鍵字1,關鍵字2,關鍵字3'
      },
      {
        name: 'description',
        content: '這是一段網頁的描述'
      }
    ]
  },
  data () {
    return {}
  }
}
</script>

到這裏 prerender-spa-plugin 與 vue-meta-info 就全部完成了