安装vue-meta-info
npm i -S vue-meta-info
main.js里面引入vue-meta-info
import MetaInfo from 'vue-meta-info'Vue.use(MetaInfo)
这样在组件页面中就可以使用了
假设你要给users.vue添加title，meta标签
users/index.vue
<template>...</template><script>export default {metaInfo: {title: '我是users头', // set a titlemeta: [{ // set metaname: 'keyWords',content: '我是users关键字'},{name: 'description',content: '我是users描述'}],link: [{ // set linkrel: 'asstes',href: 'https://assets-/'}]}}</script>
这样再结合prerender-spa-plugin-next，打包之后，在dist文件夹找到users文件夹下的index.html
打开你会发现就有title和meta的关键字和描述标签了
如果要在组件内动态使用 metaInfo ：这种方式可以动态生成META标签的内容，一般META标签的内容需要根据变量去变化的时候，可以选用这种方式
export default {metaInfo () {return {title: this.pageName}},data () {return {pageName: 'loading'}},mounted () {setTimeout(() => {this.pageName = 'async'}, 2000)}}
