Vue-meta:无法设置未定义的'$meta‘属性

Question

安装vue-meta后，我的浏览器控制台中出现错误。

为什么会出现这个错误？是来自我的代码还是一个bug？我使用的是vue-meta@2.4.0和Vue 3。

​

​

main.js

createApp(App)
  .use(router)
  .use(VueMeta)
  .mount("#app");

App.vue

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
import Header from "./components/Header.vue";

export default {
  components: {
    "app-header": Header,
  },
};
</script>

Home.vue

export default {
  name: "Home",
  metaInfo() {
    return {
      title: "test meta data with vue",
      meta: [
        {
          vmid: "description",
          name: "description",
          content:
            "hello world, this is an example of adding a description with vueMeta",
        },
      ],
    };
  },
};

Answer 1

编辑:此处正在跟踪问题

tldr

根据您的语法，(例如，createApp(App).use(router)...等)看起来您正在使用Vue3。vue-meta插件是为Vue2开发的，在开发人员创建相应的版本之前，它不会与Vue3一起工作。

原因

在Vue3中，api已经改变了。app对象被传递给插件的install方法，而不是Vue构造函数。

Vue 2安装定义

install: (Vue, options) => {}

Vue 3安装定义

install: (app, options) => { }

有一个版本3

位于这里的https://www.npmjs.com/package/vue-3-meta，然而-它似乎是包是坏的。它基本上只安装了vue-meta。

Answer 2

我认为您应该使用metaInfo属性：Doc

export default {
  name: "Home",
  metaInfo() {
    return {
      title: "test meta data with vue",
      metaInfo: [
        {
          vmid: "description",
          name: "description",
          content:
            "hello world, this is an example of adding a description with vueMeta",
        },
      ],
    };
  },
};