Vue3 组合式 API 使用 i18n 实现本地化

Vue3 使用选项式 API 较容易,按文档上手就行,这里就不多说。组合式 API 上手会比较麻烦一点。

创建实例

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
// app.js
import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import App from './App.vue';

const i18n = createI18n({
locale: 'cn', // 设置当前语言
legacy: false, // 要支持组合式API,此项必须设置为false;
// globalInjection: true, // 全局vue视图中注册$t方法,vue-i18n v9.2 之后默认是 true
messages: {
cn: {
message: {
hello: '你好',
},
},
en: {
message: {
hello: 'hello',
},
},
},
});

const app = createApp(App);
app.use(i18n);
app.mount('#app')

基本使用

1
2
3
4
5
6
7
8
9
10
<!-- App.vue -->
<script setup>
import { useI18n } from 'vue-i18n';
const { t } = useI18n(); // 组合式 API 使用 vue-i18n,关键是 createI18n 的 legacy 参数要设置成 false
console.log(t('message.hello'));
</script>

<template>
<div>在视图中使用语言: {{ $t('message.hello') }}</div>
</template>

自定义全局方法使用 vue-i18n

组合式 API 每次要 import 又要导出要用的函数,需要频繁使用,这样太麻烦了。
我们可以定义 window.$t 全局函数,这样在 setup 中也能直接用 $t()取得语言信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// app.js
import { createApp } from 'vue';
import { createI18n } from 'vue-i18n';
import App from './App.vue';

const i18n = createI18n({
locale: 'cn',
messages: {
cn: {
hello: '你好',
},
en: {
hello: 'hello',
},
},
});

window.$t = function() {
return i18n.global.t(...arguments);
}

const app = createApp(App);
app.use(i18n);
app.mount('#app')

备注

更多用法见官方文档: https://vue-i18n.intlify.dev/guide/