在vue3 vue-meta中，每个元标记显示name=" meta“，因此无法添加twitter卡元。

Question

我使用vue-meta 2.4.0我的代码如下：

metaInfo() {
    return {
      htmlAttrs: { lang: 'en', amp: true },
      title: "page title",
      description : "Page description",
      meta: [
        //twitter card
        { vmid: 'twitter:title', name: 'twitter:title', content: 'twitter title'},
        { vmid: 'twitter:description', name: 'twitter:description', content: 'twitter description'},
        // google
        {vmid: 'og:title', property: "og:title",content: "og ttitle",},
        {vmid: "og:description", property: "og:description",content:"og description",},
      ]
    }
  }

产出如下：

​

我添加了名称：'twitter:title'，它显示的是name=" meta“，也显示了所有元标记的name="meta”。

推特要求肉的味道如下：

<meta name="twitter:title" content="twitter title">
<meta name='twitter:description' content='twitter description'>

Answer 1

在vue js 3中，您应该使用vue3-meta或alpha版本。然后执行以下操作

metaInfo() {
    return {
        htmlAttrs: { lang: 'en', amp: true },
        title: "page title",
        description : "Page description",
        twitter: {
            title: "twitter title",
            description: "twitter description",
            card: "twitter card",
            image: "twitter image",
        },
        og: {
            title : 'og title!',
            description : 'og description!',
            type : 'og type',
            url : 'og url',
            image : 'og image',
            site_name : 'og site name',
        }
    }
}

如果要使用元名称，则更改main.js中的配置

import { createMetaManager, defaultConfig, plugin as metaPlugin } from 'vue-meta'
const metaManager = createMetaManager(false, {
    ...defaultConfig,
    meta: { tag: 'meta', nameless: true },
});

在组件中使用下面的元名称

metaInfo() {
    return {
        meta: [
            {'name' : 'author', 'content' : 'author'},
            { name: 'description', content: 'authors' },
        ]
    }
}