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

Question

我目前正在使用 vuetify 2.x 和 vue-i18n 编写我的第一个 Web 应用程序。不幸的是，我无法让 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。我们还展示了如何在 vue-i18n json 文件中存储自定义的 vuetify 翻译：https://vuetifyjs.com/en/features/internationalization/#vue-i18n