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

Posted 2023-02-22

【中文标题】Vue-meta：无法设置未定义的属性“$meta”

【英文标题】：Vue-meta: Cannot set property '$meta' of undefined

【发布时间】：2021-01-16 15:50:11

【问题描述】：

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

【问题讨论】：

你发现问题了吗？

还没有。但是对于替代解决方案，我将 vue 版本降级为 vue 2。

看起来，我也必须这样做。 ://

【参考方案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。

【参考方案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",
        ,
      ],
    ;
  ,
;

【讨论】：

错误仍然出现。我应该使用 nuxt.js 来使用 vue-meta 吗？目前我只使用vue

你能用完整的错误日志更新你的帖子吗？