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中，模式设置为“通用”。无论我使用生成，运行dev还是运行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}（因为它已经包含在内），然后它应该可以工作了（我在一个新项目中对此进行了测试）。

vue-meta拒绝在nuxt应用上渲染服务器端

1 个答案: