3

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

4

1 回答 1

2

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

来自vue-meta 文档：

笔记

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

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

于 2020-03-11T13:05:33.793 回答