转载-Vuetify与Vue-i18n整合踩坑指南

发表于 分类于 / / Changyan：

文章来源: https://pangwu86.com/posts/1360575077/

项目中使用了 Vuetify 这个 UI 库，现在要加上多国语言功能，踩了几个坑记录下。

使用 Vuetify 内置 i18n

Vuetify 的国际化文档链接

初始化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 引用vue,vuetify
import Vue from "vue";
import Vuetify from "vuetify/lib";
Vue.use(Vuetify);

// 选择需要的语言
// 例如：简体中文 + 日文
import zhHans from "vuetify/es5/locale/zh-Hans";
import ja from "vuetify/es5/locale/ja";

// 设置lang相关参数
const vuetify = new Vuetify({
  lang: {
    current: "zhHans",
    locales: { zhHans, ja },
  },
});
const app = new Vue({
  vuetify,
}).$mount("#app");

使用 t 函数

1
<div class="my-component">{{ $vuetify.lang.t("$vuetify.hello") }}</div>

切换语言

1
2
// 触发切换时
this.$vuetify.lang.current = "zhHans";

使用 Vuetify 整合 Vue-i18n

Vue-i18n 的官方文档链接

Vuetify 内置国际化功能比较简陋，官方也推荐使用整合的方式，后续添加自定义的国际化文本也更方便些。

初始化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
// 引用vue,vuetify,vue-i18n
import Vue from "vue";
import Vuetify from "vuetify/lib";
import VueI18n from "vue-i18n";

Vue.use(Vuetify);
Vue.use(VueI18n);

// 选择需要的语言
// 例如：简体中文 + 日文
import zhHans from "vuetify/es5/locale/zh-Hans";
import ja from "vuetify/es5/locale/ja";

// 整合自定义的信息
// 如果使用 $vuetify.lang.t 则需要把内容定义在 $vuetify 命名空间下
const zhHansUser = {
  ...zhHans,
  hello: "你好",
  $vuetify: {
    hello: "你好",
  },
};
const jaUser = {
  ...ja,
  hello: "こんにちは",
  $vuetify: {
    hello: "こんにちは",
  },
};

// 创建 VueI18n 实例
const i18n = new VueI18n({
  locale: "zhHans",
  messages: {
    zhHans: zhHansUser,
    ja: jaUser,
  },
});

// Vue-i18n的t方法替换Vuetify的默认实现
const vuetify = new Vuetify({
  lang: {
    t: (key, ...params) => i18n.t(key, params),
  },
});
const app = new Vue({
  vuetify,
  i18n,
}).$mount("#app");

使用 t 函数

1
2
3
4
5
6
<!-- 使用 $t 没有规则限制 -->
<div class="my-component">{{ $t("hello") }}</div>
<div class="my-component">{{ $t("$vuetify.hello") }}</div>

<!-- 使用 $vuetify.lang.t 只能获取 $vuetify 命名空间下的内容 -->
<div class="my-component">{{ $vuetify.lang.t("$vuetify.hello") }}</div>

切换语言

1
2
// 触发切换时
this.$i18n.locale = "zhHans";

总结

  • Vuetify 自带了一套国际化配置，但实现的 t 函数的功能相对简陋，所以实际项目中更适合加入 Vue-i18n 整合使用。
  • Vuetify 国际化文本都放在 $vuetify 这个命名空间下。
  • 整合 Vue-i18n后，实际上就是使用 Vue-i18n 来实现国际化，把 Vuetify 的文本导入并且托管了 Vuetify 的 t 函数。

资源