使用 vue-meta-info 配置title和meta按照以下步骤
1.安装
- yarn:
yarn add vue-meta-info
- npm:
npm install vue-meta-info --save
2.在main.js全局引入 vue-meta-info
import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)
3.组件内静态使用 metaInfo
<script>
export default {
metaInfo: {
title: '页面title', //设置页面title
meta: [{ //设置页面meta
name: 'keyWords',
content: '关键词'
},
{
name: "description",
content: "描述",
},]
}
}
</script>
4.如果你的 title 或者 meta 是异步加载的,那么你可能需要这样使用
<script>
export default {
metaInfo() {
return {
title: this.PageTitle,
meta: [
{
name: "keyWords",
content: this.PagekeyWords,
},
{
name: "description",
content: this.PageDescription,
},
],
};
},
data () {
return {
PageTitle: "",
PagekeyWords: "",
PageDescription: "",
}
},
mounted (){
setTimeout(() => {
this.PageTitle = '页面title'
this.PagekeyWords = '页面关键词'
this.PageDescription = '页面描述'
},2000)
}
}
</script>
如果需要更好的处理 Vue 单页面SEO,可以和 prerender-spa-plugin形成更优的配合,请看我另一篇文章哦