Vue设置单页面tdk，使用vue-meta-info设置meta

需求：用户需要每个页面对应的title，keywords，description都是不同的，随着页面内容的标题和描述变化

这个时候无法直接在 index中设置，可以使用vue-meta-info插件，使用与vue2，如果是vue3可以使用vue-meta

打开终端，安装vue-meta-info

npm i -S vue-meta-info

main.js中：

import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)

具体使用有两种方式：

一、动态使用

代码：

export default {
  metaInfo() {
    return {
      title: this.metaName,
      meta: [
        { charset: "utf-8" },
        { name: "keywords", content: this.metaKeywords },
        { name: "description", content: this.metaDecs },
      ],
    };
  },
  data() {
    return {
      metaName: "",
      metaKeywords: "",
      metaDecs: "",
    }
   },
  methods:{
   getGoodsDetail(goodsId) {
      return goodsDetail({
        goods_id: goodsId,
      })
        .then((res) => {
          console.log(res, "商品详情res");
         // 结合了i18n的功能，这个[this.$t("nowLang.lang")]不能用于metaInfo内，会造成无法显示
          this.metaName = res.info.name[this.$t("nowLang.lang")];
          this.metaKeywords = res.info.tags;
          const str1 = JSON.stringify(res.info.desc).replace(/[\\]/g, "");
          const target = JSON.parse(str1.substring(1, str1.length - 1));
          this.metaDecs = target[this.$t("nowLang.lang")];
        })
        .catch((err) => {
          console.log(err, "商品详情err");
        });
    },

  }
}

二、静态使用

<script>
  export default {
    metaInfo: {
      title: '首页', //设置页面title
      meta: [
        { charset: "utf-8" },
        { name: "keywords", content: "商城首页" },
        { name: "description", content: "文具商城首页" },
      ],
    },
    data(){
     return {
          ...
     }
    }
  }
</script>

注意：vue-meta-info并不是直接改变页面的meta信息，而是在下面追加一条覆盖上面的，如上图会在最后面追加keywords和description ，这是在开发者模式查看到的

注意：如果没有结合prerender-spa-plugin的话并不能达到SEO的方法，打开查看原代码的话还是无法显示对应的页面元素！！

参考文献：vue2中seo时使用vue-meta-info的方法_vue.js_脚本之家

参考文献：Vue使用prerender-spa-plugin进行网页预渲染 - 掘金