Vuetify与Vue-i18n整合踩坑指南

Vuetify与Vue-i18n整合踩坑指南

版权申明:本文为原创文章,转载请注明原文出处

原文链接: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
50
// 引用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 的文本导入并且托管了 Vuetifyt 函数。

Vuetify与Vue-i18n整合踩坑指南

https://pangwu86.com/posts/1360575077/

作者

胖五

发布于

2021-05-28

更新于

2021-06-04

许可协议


评论