显示Vue meta i18n变量名称而非值

Question

我有一个vue2项目，使用了vue-meta和vue-i18n来本地化项目。 在我的浏览器书签中，网页的标题没有显示出来，而是显示了变量。在谷歌分析中也出现了相同的问题，似乎显示了变量而不是变量中的值。

这是我Home组件的代码片段：

name: 'Home',
    metaInfo () {
      return {
      title: this.$t("home.meta.title"),
      meta: [{
        name: "description",
        content: this.$t("home.meta.descriptioncontent")
      }, {
        name: "keywords",
        content: 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'}
      ]
      }
    },
    data() {
      return {
        fimagefolder: '../../Images/',
        bimagefolder: '../../fImages/',
      };
    },

所以this.$t("home.meta.title")变量存储了瑞典语和英语的翻译。在网站内部，它显示了两种语言的正确标题，但是谷歌分析只显示了"home.meta.title"。

据我所了解，爬虫程序由于没有加载任何脚本，无法看到我的变量值。有什么想法吗？

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>