如何在vue3中使用Vue-meta？

Question

实际上是我安装的。在我试图添加元描述之前，一切都很顺利。问题是，当我想使用元描述而不是将名称显示为描述时，它就会显示为元描述。

​

​

如果有人能帮我，我会很感激的

我的package.json

"dependencies": {
    "@emailjs/browser": "^3.4.0",
    "@fortawesome/fontawesome-free": "^5.15.4",
    "@jambonn/vue-lazyload": "^1.0.9",
    "animate.css": "^4.1.1",
    "bootstrap-icons": "^1.7.1",
    "core-js": "^3.6.5",
    "emailjs": "^3.7.0",
    "emailjs-com": "^3.2.0",
    "mixitup": "^3.3.1",
    "sass": "^1.49.7",
    "swiper": "^8.0.7",
    "vue": "^3.0.0",
    "vue-meta": "3.0.0-alpha.7",
    "vue-router": "^4.0.14",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0",
    "sass-loader": "^8.0.2"
  },

我的main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import { createMetaManager } from 'vue-meta'

createApp(App)
    .use(store)
    .use(router)
    .use(createMetaManager())
    .mount('#app')

我的应用程序组件

<template>
  <div id="app">
    <metainfo>
      <template v-slot:title ="{ content }">{{ content ? `${content} | SITE_NAME` : `SITE_NAME` </template>
    </metainfo>
    <div>
      <Header/>
      <router-view/>
    </div>
  </div>
</template>

我的主要组件设置

import { useMeta } from 'vue-meta'

export default {
  name: 'Main',
  setup () {
    useMeta(
        {
          title: 'Some title',
          meta: [
            { name: 'description', content: 'An example Vue application with vue-meta.' },
          ]
        },
    )
  },
}

Answer 1

在main.js文件中做下面的更改

main.js

import { createMetaManager } from "vue-meta";
import { plugin as vueMetaPlugin } from "vue-meta";

app.use(vueMetaPlugin);
app.use(createMetaManager());