使用 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', //设置页面titlemeta: [{//设置页面metaname: '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形成更优的配合,请看我另一篇文章哦