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

Question

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

在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还是run，它们的结果都是一样的。

Answer 1

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

来自vue-meta文档

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

因此，将metaInfo替换为head并删除{src: '~/plugins/vue-meta.js', ssr: true} (因为它已经包括在内)，然后它就会正常工作(我在一个新项目中测试了这一点)。