Vue-meta：无法设置未定义的属性“$meta”

Question

安装vue-meta后，我的浏览器控制台报错。

为什么会出现这个错误？是我的代码还是错误？我正在使用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>

首页.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

编辑：这里正在跟踪问题https://github.com/nuxt/vue-meta/issues/628

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",
        },
      ],
    };
  },
};