vue 动态设置样式_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: [{ // set meta

name: 'keyWords',

content: 'My Example App'

}]

link: [{ // set link

rel: 'asstes',

href: 'http://fekly.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），重新拉取代码，才能编译成功。