如何在 Vue Meta 3 中创建自定义元标记？答案

【问题标题】：How to create custom meta tags in Vue Meta 3?如何在 Vue Meta 3 中创建自定义元标记？
【发布时间】：2021-08-19 15:58:26
【问题描述】：

我正在使用Vue Meta 3 向网站提供元数据。这个API是here

我不明白如何提供自定义元标记（例如 Open Graph 标记，例如 og:type）。这是我在组件中尝试做的事情：

setup() {
    useMeta({
      title: "Homepage",
      meta: [
          {name: "hunky:dory", content: "website"}
      ],
      description: "This is the homepage."
    })
  },

输出的 HTML 如下所示：

<head>
 <title>Homepage</title>
 <meta name="description" content="This is the homepage.">
 <meta name="meta" content="website"> <!-- should be <meta name="hunky:dory content="website"> -->
</head>

如果我把代码改成这样：

setup() {
    useMeta({
      title: "Homepage",
      "hunky:dory": [
          {content: "website"}
      ],
      description: "This is the homepage."
    })
  },

我得到了非法的 HTML 输出：

<head>
     <title>Homepage</title>
     <meta name="description" content="This is the homepage.">
     <hunky:dory>website</hunky:dory> <!-- total nonsense -->
    </head>

我如何获得输出：

<head>
         <title>Homepage</title>
         <meta name="description" content="This is the homepage.">
         <meta name="hunky:dory" content="website">
        </head>

【问题讨论】：

标签： vue.js vuejs3 vue-meta

【解决方案1】：

让 og meta 工作有两个部分——我想我可以帮助完成第 1 部分：

正确的vue-meta 语法
服务器端渲染 (SSR)

第 1 部分：Vue 3 的 vue-meta

我用vue-class-component 写了这个，它似乎正在工作：

meta = setup(() => useMeta(computed(() => ({
  title: this.event?.name ?? 'Event not found',
  og: {
    image: this.event?.bannerUrl ?? 'http://yourwebsite.com/images/default-banner.png'
  }
}))))

...这大概在原版 Vue 3 中转化为：

setup() {  
  useMeta(
    computed(() => ({
      title: this.event?.name ?? 'Event not found',
      og: {
        image: this.event?.bannerUrl ?? 'http://yourwebsite.com/images/default-banner.png'
      }
    }))
  )
}

结果：

<meta property="og:image" content="http://cloudstorage.com/images/event-123.png">

参考资料：

第 2 部分：SSR

完成第 1 部分后，我意识到我没有设置 SSR...所以我只是为我的用户呈现元数据，而不是为 Facebook 的爬虫（不是很有用）。恐怕我还没有在我的项目中解决这个问题； 也许其他人可以参与其中！

在那之前，也许这会让你开始：

注意：vue-meta 隶属于Nuxt GitHub 组织 => 您可以考虑迁移到 Nuxt v3（基于 Vue 构建）：

【讨论】：

我不使用 Nuxt 或 Vue-Cli。我更喜欢完全控制应用程序，因为这样您就可以根据需要更新/升级部件。
@volumeone - 您如何构建您的生产应用程序？
使用 Webpack 5。它是一个 Node.js/Express 后端和 Vue.js 3 前端。一切都通过 Webpack 完成。
恐怕这已经超出了我的能力范围。我认为您最好的选择可能是打开一个专门针对“使用 SSR 和 webpack 5 构建 Vue 3”的新问题。
请随意保留问题——也许其他人可以添加更具体的 SSR 答案。