用于社交共享的 Vue 应用程序元标记

Question

我开发了一个 Vue 应用程序，每个页面上都有导航和内容。我需要的是为 Twitter 和 Facebook 卡的每个不同页面设置元标记。为此，我使用 vue-meta 库，并提出了以下代码：

metaInfo() {
  return {
    meta: [
      {
        property: 'og:title',
        content: `Card #${this.card_no ? this.card_no : ''}`,
        vmid: 'og:title'
      },
      {
        property: 'og:image',
        content: `${this.card ? this.card.participantA.image : ''}`,
        vmid: 'og:image'
      },
      {
        property: 'og:description',
        content: `${this.card ? this.card.description : ''}`,
        vmid: 'og:description'
      },
      {
        property: 'twitter:title',
        content: `Card #${this.card_no ? this.card_no : ''}`,
        vmid: 'twitter:title'
      },
      {
        property: 'twitter:image',
        content: `${this.card ? this.card.participantA.image : ''}`,
        vmid: 'twitter:image'
      },
      {
        property: 'twitter:description',
        content: `${this.card ? this.card.description : ''}`,
        vmid: 'twitter:description'
      },
      {
        name: 'twitter:card',
        content: `summary_large_image`,
        vmid: 'twitter:card'
      }
    ]
  }
}

这些属性是从 Mounted() 挂钩处的 API 获取的，我可以看到它们已正确添加。但是共享还没有起作用，我认为它们需要添加到主index.html中吗？但就我而言这是不可能的，因为它们是动态的并且并不总是固定的。有没有解决的办法？我知道 SSR 可以解决这个问题，但目前这不是一个选择，因为目前使用 Nuxt 重写大部分应用程序是不可接受的。

Answer 1

您可以在任何 vue 应用程序中实现 SSR，无需 nuxt。不幸的是，我自己还没有这样做过。但是，你可以看看这个包：

https://github.com/vuejs/vue/tree/dev/packages/vue-server-renderer#readme