在 Vuetify 中使用 vue-i18n 实现多语言国际化

安装 Vue I18n

在项目(此前已经安装好 Vuetify )的控制台下输入命令：yarn add vue-i18n

安装的过程显示如以下：

$ yarn add vue-i18n  --registry https://registry.npm.taobao.org
yarn add v1.22.5
[1/4] Resolving packages...
[2/4] Fetching packages...
info fsevents@2.1.3: The platform "win32" is incompatible with this module.
info "fsevents@2.1.3" is an optional dependency and failed compatibility check. Excluding it from installation.
info fsevents@1.2.13: The platform "win32" is incompatible with this module.
info "fsevents@1.2.13" is an optional dependency and failed compatibility check. Excluding it from installation.
[3/4] Linking dependencies...
warning " > sass-loader@8.0.2" has unmet peer dependency "webpack@^4.36.0 || ^5.0.0".
warning "vue-cli-plugin-vuetify > null-loader@3.0.0" has unmet peer dependency "webpack@^4.3.0".
warning " > vuetify-loader@1.6.0" has unmet peer dependency "webpack@^4.0.0".
[4/4] Building fresh packages...

success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ vue-i18n@8.22.3
info All dependencies
└─ vue-i18n@8.22.3
Done in 7.19s.

添加语言文件

在项目中新建文件夹 src/locale, 然后添加 English 的语言文件：src/locale/en.js 和简体中文的语言文件：src/locale/zh-Hans.js 。

分别修改以上两个语言文件，src/locale/en.js 的内容如以下代码所示：

// src/locale/en.js
import en from 'vuetify/es5/locale/en';

export default {
    label: 'English',
    //page login
    login: 'Login',
    register: 'Register',
    username: 'Username',
    password: 'Password',
    login_account: 'Login accoount',
    // menu
    menu: {
        home: 'Home',
        dashboard: 'Dashboard',
    },
    //
    ...en,
}

src/locale/zh-Hans.js 的内容如以下代码所示：

// src/locale/zh-Hans.js
import zhHans from 'vuetify/es5/locale/zh-Hans';  // 导入Vuetify 自带的简体中文语言包

export default {
    label: '简体中文',
    // page login
    login: '登录',
    register: '注册',
    username: '用户名',
    password: '密码',
    login_account: '登录帐户',
    // menu
    menu: {
        home: '首页',
        dashboard: '仪表盘',
    },
    // 展开 简体中文语言包的所有项目
    ...zhHans,   
}

如果还需要其他的语言文件，则按照上面的格式进行修改即可。

修改配置文件

打开 Vuetify 的配置文件： src/plugins/vuetify.js， 修改其内容如以下代码所示：

// src/plugins/vuetify.js
import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
import zhHans from '@/locale/zh-Hans';   // 导入简体中文语言
import en from '@/locale/en';            // 导入English语言

Vue.use(Vuetify);
export default new Vuetify({
    lang: {
        locales: { zhHans, en },   // 所有的语言
        current: 'en',             // 当前语言
    }
});

添加多语言选择菜单组件

添加新文件：src/components/LocaleLanguage.vue，编辑其内容如以下代码所示：

<!-- src/components/LocaleLanguage.vue -->
<template>
  <div>
    <!-- 多语言选择菜单 -->
    <v-menu
      offset-y
      origin="center center"
      class="elelvation-1"
      transition="scale-transition"
    >
      <template v-slot:activator="{ on }">
        <v-btn text slot="activator" v-on="on">
          <v-icon medium>mdi-translate</v-icon>
          <!-- 显示当前语言名称 -->
          <span class="ml-2"> {{ localeText }} </span>
          <v-icon small>mdi-menu-down</v-icon>
        </v-btn>
      </template>
      <!-- 显示所有语言包组成的下拉菜单 -->
      <v-list>
        <v-list-item-group v-model="$vuetify.lang.current">
          <v-list-item
            @click="handleChangeLocale(item)"
            v-for="item in availableLanguages"
            :key="item.value"
            :value="item.value"
          >
            <v-list-item-title v-text="item.text" />
          </v-list-item>
        </v-list-item-group>
      </v-list>
    </v-menu>
  </div>
</template>

<script>
export default {
  name: "locale-language",
  methods: {
    // 设置当前语言
    handleChangeLocale({ value }) {
      this.$vuetify.lang.current = value;
    },
  },

  computed: {
    // 遍历并获取项目中的所有语言包
    availableLanguages() {
      const { locales } = this.$vuetify.lang; // 所有的语言，来自 src/plugins/vuetify.js 中的配置
      return Object.keys(locales).map((lang) => {
        return {
          text: locales[lang].label, // 语言包显示的名字
          value: lang, // 语言包的值
        };
      });
    },
    // 当前语言, 用于语言切换菜单中显示的当前语言名字
    localeText() {
      const find = this.availableLanguages.find(
        (item) => item.value === this.$vuetify.lang.current
      );
      return find.text;
    },
  },
};
</script>

<style>
</style>

在 AppBar 中添加语言选择菜单

将上一步编写好的组件添加到顶部的 AppBar 中，打开 src/components/AppBar.vue，添加对 LocaleLanguage组件的引用和注册，并调用该组件，修改其代码如以下所示：

<!-- 
 * @FilePath: \chat-zone-app\src\components\AppBar.vue
-->
<template>
  <v-app-bar app>
    <v-toolbar-title> Char Zone App </v-toolbar-title>
    <v-btn text class="mx-3" to="/">
      Home
    </v-btn>
    <v-btn v-if="current_user" text class="mx-3" to="/dashboard">
      Dashboard
    </v-btn>
    <v-spacer></v-spacer>
    <!--  第 2 步：这里添加多语言选择菜单组件的调用 -->
    <locale-language />

    <!-- 此处省略了与当前功能无关的其他代码  -->

  </v-app-bar>
</template>

<script>

//  此处省略了与当前功能无关的其他代码

export default {
  name: "cz-app-bar",
  components: {
    // 第 1 步：导入并注册 多语言选择组件
    LocaleLanguage: () => import("@/components/LocaleLanguage.vue"),  
  },
   
  //  此处省略了与当前功能无关的其他代码

};
</script>

<style>
</style>

完成后，在 AppBar 上已经可以看到用于多语言选择的下拉菜单

应用多语言

在其他需要使用多语言功能的地方，可以通过类似 {{ $vuetify.lang.t("$vuetify.label") }} 的形式来使用事先在 语言包中定义好的名字，这里的 label 就是在语言包中定义好的变量。

下面来看一个实例， 打开 src/components/AppBar.vue 文件，找到 template 中的文字Home 和 Dashboard， 待修改的代码如以下所示：

<!--
 * @FilePath: \chat-zone-app\src\components\AppBar.vue
-->
<template>
  <v-app-bar app>
    <v-toolbar-title> Char Zone App </v-toolbar-title>
     <v-btn text class="mx-3" to="/">
      Home
    </v-btn>
    <v-btn v-if="current_user" text class="mx-3" to="/dashboard">
      Dashboard
    </v-btn>

将这两个文字修改为如以下代码：

<!--
 * @FilePath: \chat-zone-app\src\components\AppBar.vue
-->
<template>
  <v-app-bar app>
    <v-toolbar-title> Char Zone App </v-toolbar-title>
    <v-btn text class="mx-3" to="/">
      {{ $vuetify.lang.t("$vuetify.menu.home") }}
    </v-btn>
    <v-btn v-if="current_user" text class="mx-3" to="/dashboard">
      {{ $vuetify.lang.t("$vuetify.menu.dashboard") }}
    </v-btn>

    <!-- 后面的代码与当前功能无关， 省略了。 -->

现在可以进行语言切换，并看到效果了

当前语言为：English

当前语言更改为：简体中文

===END===

---