vue 使用vue-meta-info来动态设置标题

1、安装 vue-meta-info

npm i vue-meta-info --save

2、使用，在 main.js 文件中引入 vue-meta-info

import Vue from ‘vue’
import MetaInfo from ‘vue-meta-info’;
Vue.use(MetaInfo)

3、组件内静态使用 metaInfo

export default {
 metaInfo: {
 title: 'My Example App', // set a title
 meta: [{                
   // 设置meta信息
   name: 'keyWords',
   content: 'My Example App'
 }]

  link: [{                 
   // 设置链接信息
   rel: 'asstes',
   href: 'http://www.dsiab.com'
  }]
 }
}

4、如果要在组件内动态使用 metaInfo ：这种方式可以动态生成META标签的内容，一般META标签的内容需要根据变量去变化的时候，可以选用这种方式。

export default {
 name: 'async',
 metaInfo () {
 return {
  title: this.pageName
 }
},

data () {
 return {
  pageName: 'loading'
 }
},

mounted () {
  setTimeout(() => {
   this.pageName = 'async'
 }, 2000)
 }
}

注意：

添加完依赖包后，如果是通过jenkins来编译部署的话（不是在线npm install），需要先设置先设置流水线的构建后删除文件（在构建后添加操作delete workspace when build is done），重新拉取代码，才能编译成功。

示例：

export default {
	
	metaInfo(){
		return {
			title: this.detail.title,
			meta: [
				{ charset: "utf-8" },
				{ name: "viewport", content: "width=device-width, initial-scale=1" },
			]
		}
	},


}