Vue meta Alpha8 无法正确生成元标记答案

【问题标题】：Vue meta Alpha8 doens't generate meta tags properlyVue meta Alpha8 无法正确生成元标记
【发布时间】：2022-06-19 23:12:12
【问题描述】：

您好，我正在使用带有 vue-meta: ^3.0.0-alpha.8 的 Vue3。我正在尝试设置我的项目以动态设置元标记。这是我在App.vue上的代码：

import constants from './constants'

export default {
   data() {
      return {
         constants: constants
         }
      }
   },
   setup() {
      useMeta({
         htmlAttrs: { 
            lang: constants.meta.language,
         },
         description: constants.main.description,
         meta: [
            {
               name: 'author',
               content: constants.meta.author
            },
            {
               name: 'keywords',
               content: constants.meta.keywords
            },
            {
               name: 'robots',
               content: constants.meta.robots
            }
          ]
      }
   }
}

htmlAttrs 和 description 可以正常生成：<html lang="en" ... 和 <meta name="description" content="My description">

另一方面，其他标签生成错误：

<meta name="meta" content="my author string">
<meta name="meta" content="my keywords string">
<meta name="meta" content="my robots string">

为什么它生成<meta name="meta" .. 而不是<meta name="MY PARAMETER NAME" ..？我就是想不通。

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

嘿，我遇到了同样的问题，我查看了 vue-meta 文件，发现您可以像在 main.js 文件中那样将自己的配置添加到 createMetaManager 函数中：

import { createApp } from "vue";
import { createMetaManager } from "vue-meta";
import App from "./App.vue";
import router from "./router";
import store from "./store";
// import Amplify from "aws-amplify";
// import config from "./aws-exports";

import "./assets/css/tailwind.css";

createApp(App)
.use(store)
.use(router)
.use(
    createMetaManager(false, {
    body: {
        tag: "script",
        to: "body",
    },
    base: {
        valueAttribute: "href",
    },
    charset: {
        tag: "meta",
        nameless: true,
        valueAttribute: "charset",
    },
    description: {
        tag: "meta",
    },
    og: {
        group: true,
        namespacedAttribute: true,
        tag: "meta",
        keyAttribute: "property",
    },
    twitter: {
        group: true,
        namespacedAttribute: true,
        tag: "meta",
    },
    htmlAttrs: {
        attributesFor: "html",
    },
    headAttrs: {
        attributesFor: "head",
    },
    bodyAttrs: {
        attributesFor: "body",
    },
    robots: {
        tag: "meta",
    },
    })
)
.mount("#app");

createMetaManager 中的第一个参数是 isSSR，第二个是配置（在 vue-meta/dist/vue-meta.csj.js 中有一个 defaultConfig 变量，我复制它然后修改为包含一个 robots 对象）。这是我的回家路线：

setup() {
  useMeta({
    title:
      "title",
    htmlAttrs: { lang: "en", amp: true },
    description:
      "desc",
    robots: "index, no follow",
  });
},

【讨论】：