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

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），重新拉取代码，才能编译成功。