Vue-meta无法设置未定义的属性“ $ meta” Vue 2安装定义 Vue 3安装定义

问题描述

安装vue-Meta后，浏览器显示错误。为什么会显示此错误？是我的代码还是错误？ IAM使用vue-Meta@2.4.0

main.js

    {
      foo: "bar",baz: 17,children: [
        {title: "Node 1",key: "1"},{title: "Folder 2",key: "2",folder: true,children: [
          {title: "Node 2.1",key: "3"},{title: "Node 2.2",key: "4"}
          ]
        }
      ]
    }

App.vue

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

Home.vue

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

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

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

解决方法

编辑：此处{@ {3}}

正在跟踪问题

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://github.com/nuxt/vue-meta/issues/628 但是-似乎包装坏了。它基本上只是安装vue-meta。

我认为您应该使用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",},],};
  },};

vue-meta vue.js