Vue meta i18n 变量名显示而不是值答案

【问题标题】：Vue meta i18n variable name showing instead of valueVue meta i18n 变量名显示而不是值
【发布时间】：2021-10-10 11:58:33
【问题描述】：

我有一个带有 vue-meta 的 vue2 项目，并且我有 vue-i18n 来本地化该项目。在我的浏览器书签中，未显示网页的标题。而是显示变量。在谷歌分析中查看同样的问题，似乎显示的是我的变量而不是变量中的值。

这是我的 Home 组件中的代码 sn-p：

   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”。

据我了解，由于未加载任何脚本，爬虫看不到我的变量值？有什么想法吗？

【问题讨论】：

标签： vue.js seo vue-i18n vue-meta

【解决方案1】：

最好看看你的一些代码，看看你是如何设置的，否则我们有点摸不着头脑，很难提供帮助。所以，这更像是一个评论而不是一个答案，但我正在分享一些可能有帮助但不适合评论的代码。

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

<template>
<div>
    <p>The title of this page should be 'Translated Title'.</p>
</div>
</template>

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

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

【讨论】：

嗨，我已经用我的 Home 组件中的代码 sn-p 更新了帖子。
这对新代码 sn-p 有帮助吗？就像我说的，当我在网站内时，它会显示正确的标题，但不在书签中，也不在谷歌分析中。此外，当我加载页面时，我可以看到变量名称消失之前需要 1 秒钟，而转换后的值会显示出来..

【解决方案2】：

我找到了解决方案。由于在我的视图组件和我的应用程序组件中都有我的元详细信息，因此出现此问题。当我从 App 组件中删除我的 Meta 详细信息时，问题不会发生。

我相信这是因为在安装应用程序组件之前，区域设置不会变为活动状态。因此，元变量在几毫秒后为空。

【讨论】：