Vue常用插件：vue-meta-info

简介

基于Vue 2.0的单页面meta info管理
VUE(SPA)项目中使用SEO-动态生成META标签

步骤

安装

• 安装：npm i vue-meta-info --save

引入

• 修改src/main.js文件，全局引用

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

静态使用

• 在页面组件中使用

export default {
  metaInfo: {
    title: 'My Example App', // set a title
    meta: [{                 // set meta
      name: 'keyWords',
      content: 'My Example App'
    }]
    link: [{                 // set link
      rel: 'asstes',
      href: 'https://assets-cdn.github.com/'
    }]
  }
}

动态使用

这种方式可以动态生成META标签的内容，一般META标签的内容需要根据变量去变化的时候，可以选用这种方式

• 在页面组件中使用

export default {
  metaInfo () {
    return {
      title: `${this.companyinfo.FirmName || ''} - My Project`,
      meta: [{
        name: 'keywords',
        content: `${this.companyinfo.FirmName}`
      }]
    }
  }
}

参考链接

• vue-meta-info