vue 如何支持seo

• 必要的插件

1. "vue-meta-info": "^0.1.7",

2. "prerender-spa-plugin": "^3.4.0",

• 安裝方法

1. npm install vue-meta-info --save

2. npm install prerender-spa-plugin --save-dev

• 使用方法

vue-meta-info

1. 1、 main.js文件中

// ...
import MetaInfo from 'vue-meta-info'

// ...
Vue.use(MetaInfo)

1. 2、有路由的組件中

export default {
  name: 'Index',
  metaInfo: {
    title: '家盟家政管理系統', // set a title
    meta: [{ // set meta
      name: 'keyWords',
      content: '家盟，家政管理，家政助手，月嫂管理，保姆管理，育兒嫂管理，阿姨管理，三個阿姨'
    }, {
      name: 'Description',
      content: '家盟是爲家政公司提供的一款SaaS平臺，提供針對阿姨和客戶的管理工具，通過阿姨簡歷快捷分享、自由添加客戶跟進記錄等更好的實現阿姨與客戶的匹配與協調，從而降低客戶流失率；自定義商家小程序中的顯示內容和服務產品，提升門店形象，拓展獲取客戶渠道。'
    }]
  }
}

 prerender-spa-plugin

      2.1 、main.js文件中

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  /* 這句非常重要，否則預渲染將不會啓動 */
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
})

      2.2、webpack.prod.conf.js文件中

const webpackConfig = merge(baseWebpackConfig, {
  plugins: [
    // new ...
    // 不要講這個new放在plugins的開頭，否則導致編譯報錯
    new PrerenderSPAPlugin({
      // 生成文件的路徑，也可以與webpakc打包的一致。
      // 下面這句話非常重要！！！
      // 這個目錄只能有一級，如果目錄層次大於一級，在生成的時候不會有任何錯誤提示，在預渲染的時候只會卡着不動。
      staticDir: path.join(__dirname, '../dist'),
      
      // 對應自己的路由文件，比如index有參數，就需要寫成 /index/param1。
      routes: ['/', '/download'],
      
      // 這個很重要，如果沒有配置這段，也不會進行預編譯
      renderer: new Renderer({
          inject: {
            foo: 'bar'
          },
          headless: false,
          // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，兩者的事件名稱要對應上。
          renderAfterDocumentEvent: 'render-event'
      })
    })
  ]
}

npm run build打包上線後可以在seo查詢中查看自己網站的KeyWords,Description等信息

不用太多咬文嚼字，如果覺得這篇文章對你的工作有幫助，請留下你的足跡，附上線上案例，點擊 家盟家政查看