如何将我自己的翻译添加到我的 vuetify 2.x 网络应用程序中？

Question

我目前正在使用 vuetify 2.x 和 vue-i18n 编写我的第一个网络应用程序。不幸的是，我无法让 i18n 为我自己的翻译工作。

我有一个包含以下条目的菜单

      <v-menu bottom left offset-y transition="slide-y-transition">
        <template v-slot:activator="{ on }">
          <v-btn icon v-on="on">
            <v-icon>mdi-dots-vertical</v-icon>
          </v-btn>
        </template>
        <v-list>
          <v-list-item @click="showAllItems">
            <v-list-item-title>
              {{ $vuetify.lang.t("cancelFilters") }}
            </v-list-item-title>
          </v-list-item>
          <v-list-item @click="showNonZeroItems">
            <v-list-item-title>
              {{ $vuetify.lang.t("maskZero") }}
            </v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>

但是显示的是按键，而不是英语或其他语言。我将英语设置为后备语言。

该功能存在并且正在运行，但我的翻译未被考虑在内。

这是src/locales/en.json的内容。我不确定键是否可以包含空格。

{
  "search": "Search",
  "cancelFilters": "Cancel filters",
  "maskZero": "Mask zero counts",
  "maskUnchecked": "Mask unchecked",
  "maskChecked": "Mask checked",
  "sharingCode": "Sharing code",
  "preferences": "Preferences",
  "addList": "Add list",
  "disconnect": "Disconnect",
  "sponsoringLink": "Sponsoring link"
}

我看到locales目录下的json文件都加载到src/i18n.js文件里了

获取我的翻译需要哪些缺失的步骤？

如何更改当前语言？

解决方案：我找到了如何使用 en.json 中定义的我自己的翻译。只需将 $vuetify.lang.t 替换为 $i18n.t。就如此容易。仍然需要找到如何更改当前语言。

Answer 1

$vuetify.lang 只是一个轻量级实现，旨在供 Vuetify 的组件在内部使用，以翻译像 v-select 的 no-data-text 这样的字符串。这些 props 可以采用纯字符串 (no-data-text="There's nothing here") 以及翻译键，因此键需要加上前缀 $vuetify (no-data-text="$vuetify.noDataText").

显然这不是很有用并且不会给您很大的灵活性，因此为了翻译您网站的其余部分，我们建议使用 vue-i18n instead. We also show how to store customised vuetify translations in the vue-i18n json files: https://vuetifyjs.com/en/features/internationalization/#vue-i18n

如何将我自己的翻译添加到我的 vuetify 2.x 网络应用程序中？

How to add my own translations to my vuetify 2.x web app?

vue.js

vuetify.js

vue-i18n