Vue Meta i18n-Variablennamen anstelle von Werten anzeigen

Question

Ich habe ein vue2-Projekt und verwende vue-meta und vue-i18n, um das Projekt zu lokalisieren. In meinen Browser-Lesezeichen wird nicht der Titel der Webseite angezeigt, sondern die Variable. Das gleiche Problem tritt in Google Analytics auf. Es scheint, dass die Variable anstelle des Werts in der Variablen angezeigt wird.

Dies ist der Codeausschnitt meiner Home-Komponente:

name: 'Home',
    metaInfo () {
      zurückkehren {
      Titel: this.$t("home.meta.title"),
      Meta: [{
        Name: "Beschreibung",
        Inhalt: this.$t("home.meta.descriptioncontent")
      }, {
        Name: "Schlüsselwörter",
        Inhalt: this.$t("home.meta.keywordscontent")
      },
      { property: 'og:title', content: this.$t("home.meta.title")},
      { property: 'og:site_name', content: 'www.examplesite.se'},
      { property: 'og:description', content: this.$t("home.meta.descriptioncontent")},
      { property: 'og:type', content: 'Home'},
      { property: 'og:url', content: 'https://examplesite.se/'},
      {property: 'og:image', content: 'https://www.examplesite.se' + '/img/' + 'example_logo_social.png'}
      ]
      }
    },
    Daten() {
      zurückkehren {
        fimagefolder: '../../Images/',
        bimagefolder: '../../fImages/',
      };
    },

Diese.$t("home.meta.title")-Variable speichert also die schwedischen und englischen Übersetzungen. Auf der Website wird der korrekte Titel in beiden Sprachen angezeigt, Google Analytics zeigt jedoch nur „home.meta.title“ an.

Soweit ich weiß, kann der Crawler meine Variablenwerte nicht sehen, da keine Skripte geladen sind. Irgendwelche Ideen?

Answer 1

看到一些你的代码会很好，这样我们就能了解你是如何设置的，否则我们就有点蒙了，很难帮助你。所以，这更像是一条评论而不是一个答案，但我会分享一些可能有帮助的代码，而这些代码无法放在评论中。

我假设你正在使用vue-i18n，并且我猜你正在将vueMeta定义为一个对象。然而，如果你将其定义为一个函数，你就可以访问其他组件数据，包括this.$t。它们应该像这样一起工作：

<template>
<div>
    <p>这个页面的标题应该是“Translated Title”。</p>
</div>
</template>

<script>
export default {
    metaInfo () {
        return {
            title: this.$t('title')
        }
    }
}
</script>

<i18n>
{
    "en": {
        "title": "Translated Title"
    }
}
</i18n>