将从 API 获取的动态元标记添加到 nuxtjs 静态站点答案

【问题标题】：Adding dynamic meta tags fetched from API to nuxtjs static site将从 API 获取的动态元标记添加到 nuxtjs 静态站点
【发布时间】：2021-11-27 05:56:09
【问题描述】：

我有一个静态网站，其中包含 Nuxt 和来自 Strapi 的内容。我想动态设置异步获取的元标记。

我的网站有一个索引页面，它通过 props 将获取的数据传递给 index-web 或 index-mobile。

let pageMeta: any
const apiBase: string = 'https://strapi.xyz.com'

export default Vue.extend({
  components: { Greeting, Showcase, Features, Footer },

  props: {
    data: Map,
    pageMeta,
  },

  data() {
    return {
      loading: true,
    }
  },

  metaInfo(): any {
    return {
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: pageMeta.description,
        },
        {
          hid: 'author',
          name: 'author',
          content: pageMeta.author,
        },
      ],
    }
  },
})

在 JSON 解析对象中传递的道具。

完成此操作后，生成的网站没有添加元标记。

【问题讨论】：

刚刚瞥了一眼，但是你可以用“this”访问它吗？
@Ehrlich_Bachman 说了什么。
是的，成功了！我将 meta[] 从 metaInfo 移动到 head 并且没有使用“any”，而是使用 Object 作为类型

标签： vue.js nuxt.js meta-tags static-site

【解决方案1】：

如前所述，您需要使用.this 访问该属性。

【讨论】：