vue專案一般為SPA應用，而單頁面是不利於SEO的，目前有兩種解決方案：

1、SSR伺服器渲染：

       “服務端渲染對於剛接觸 vue 的新手來說，並不是那麼友好，雖然已有官方 SSR 中文文件。但是對於一個已經開發完畢的 vue 專案去接 SSR 無論是從工作量還是技術角度來說，都是一種挑戰。”--不是我說的。

大概意思就是：開發成本太大，不適合已完成/已上線的專案。
　  

2、預渲染模式：

      “訪問預渲染出來的頁面，在訪問時與SSR一樣快，並且它將服務端編譯HTML的時機提前到了構建時，因此也降低了服務端的壓力，如果你的伺服器跟我的一樣買的 1M1G1核

這時大家都會推薦使用一個外掛：“prerender-spa-plugin ”，而且可以配合 vue-meta-info 來生成title和meta標籤，基本可以滿足SEO的需求 。
　  注意了:這時候有人會說“使用預渲染vue-router必須使用history模式,hash模式渲染頁面都是一個。。。。”，本人親測，沒有這回事，不知道為什麼！！！

而且，用了history路由線上環境不能重新整理頁面，因為會報404，不要問我為什麼，自己百度找原因去。

如何使用prerender-spa-plugin？

1.

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

2.找到他：

在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。這裡直接對照自己的router修改！！！
  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 就全部完成了 。

本文是本人根據網上的案列，自己親測成功之後整理出來的。由於被history路由誤導折磨了很久故此記錄下來為了提醒自己，也為了讓看到本文的人少爬點坑。。。