vue seo優化（預渲染prerender-spa-plugin結合vue-meta-info）

參考文章：

https://www.jianshu.com/p/56949dab75e5
https://www.cnblogs.com/kdcg/p/9606302.html
https://blog.csdn.net/yftk765768540/article/details/81047145

https://blog.csdn.net/yanby921005/article/details/80305971（seo優化-頁面內容優化）

 https://github.com/muwoo/vue-meta-info（vue-meta-info官網）

正文：

 

前提：已完成vue單頁面開發，使用的hash模式，但現在需要對網站進行seo優化

選擇seo優化的方式：對於項目的現狀，選擇“預渲染”方式進行seo優化

優化步驟：

一、首先搜索引擎對於#后面的內容（錨）點一般是不收錄的，所以需要先把hash模式改成history模式

1.router文件夾中index.js

export default new Router({
    mode: 'history',
    base: '/',//如果項目直接放的跟目錄, 那么是沒有問題的,如果是子目錄,那么就會一片空白了.這個vue官方有解釋,需要加一個base
  routes: []
})

2.改成history模式后，后台的配置上篇文章已經說明，地址https://www.cnblogs.com/duanzhenzhen/p/11585952.html

3.安裝prerender-spa-plugin

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

4.在webpack.prod.conf.js頭部引入prerender-spa-plugin：

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

 5.在webpack.prod.conf.js的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'
  })
}),

6.在main.js里面修改：

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

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

cnpm install vue-meta-info --save

8.在main.js引入：

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

9.在vue頁面中配置：

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

10.完成

待解決問題：

vue-meta-info設置完keywords，content后，右鍵查看源代碼還是沒有內容。暫時在index.html中寫成靜態title,keywords,content

補充：title格式：xxx_xxx_xxx；或xxx,xxx,xxx（包含網站定位和轉化（即用戶看到后能主動點進去，如：用戶看到“環保地板十大品牌”中的“十大品牌”就會更容易進入網站））