vue-meta 拒绝在 nuxt 应用程序上呈现服务器端

Question

我在nuxt.config.js 中有{src: '~/plugins/vue-meta.js', ssr: true},

在index.vue:

  async asyncData({ params, store }) {
    await store.dispatch("articles/getArticle", params.slug);
    return {
      article: store.getters["articles/getArticle"]
    };
  },
  metaInfo() {
    return {
      title: this.article.title,
      meta: [
        {
          vmid: "description",
          hid: "description",
          name: "description",
          content: this.article.meta_tag_content
        },
        {
          property: "og:title",
          hid: "og-title",
          vmid: "og-title",
          content: this.article.title
        },
        {
          property: "og:description",
          hid: "og-description",
          vmid: "og-description",
          content: this.article.meta_tag_content
        },
        {
          property: "og:image",
          hid: "og-image",
          vmid: "og-image",
          content: this.article.small_image_url
        },
        {
          property: "og:type",
          hid: "og-type",
          vmid: "og-type",
          content: "article"
        },
        {
          property: "og:url",
          hid: "og-url",
          vmid: "og-url",
          content: location.origin
        },
        {
          name: "twitter:card",
          hid: "twitter-card",
          vmid: "twitter-card",
          content: this.article.meta_tag_content
        }
      ]
    };
  },

但这些都不会呈现服务器端 - 它只呈现客户端，这意味着 Facebook 不会读取 OG 元元素。

是否需要为 Nuxt 设置其他内容才能呈现此服务器端？

模式在 nuxt.config.js 中设置为“通用”。不管我是使用 generate、run dev 还是 run start，结果都是一样的。

Answer 1

Nuxt.js 默认已经包含vue-meta。但是，您需要使用head() 而不是metaInfo()。

来自vue-meta docs：

注意

尽管我们在此页面上讨论了 metaInfo 变量，但请注意 keyName 是可配置的，并且在您的情况下可能会有所不同。例如。 Nuxt.js 使用head 作为keyName

因此，将metaInfo 替换为head 并删除{src: '~/plugins/vue-meta.js', ssr: true}（因为它已经包含在内）然后它应该可以工作（我在一个新项目上测试过）。