时间戳

首页 > 解决方案 > 如何将我自己的翻译添加到我的 vuetify 2.x 网络应用程序中？

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

问题描述

我目前正在使用 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. 就如此容易。仍然需要找到如何更改当前语言。

标签： vue.jsvuetify.jsvue-i18n

解决方案

$vuetify.lang只是一个轻量级的实现，旨在供 Vuetify 的组件在内部使用来翻译像 v-select's 这样的字符串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

推荐阅读