【vue3】：国际化解决方案
усилの博客 2022/7/4 方案vue3element-plus
# # 国际化
element plus
非 element plus
# # 常规操作
下载 vue-i18n
# # element plus 国际化
<template>
<el-config-provider :locale="$store.getters.language === 'en' ? en : zhCn">
<router-view></router-view>
</el-config-provider>
</template>
1
2
3
4
5
2
3
4
5
根据不同 locale 使用<el-config-provider>加载不同的语言文件，element plus 无需手动加载，只需设置 en或者 zhCn即可
# # 非 element plus 国际化
- 创建语言文件
- 创建 i18n实例对象
- 全局注册 i18n对象
语言文件
// i18n/lang/en.js
export default {
login: {
title: 'User Login',
loginBtn: 'Login',
usernameRule: 'Username is required',
passwordRule: 'Password cannot be less than 6 digits'
}
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
// i18n/lang/zh.js
export default {
login: {
title: '用户登录',
loginBtn: '登录',
usernameRule: '用户名为必填项',
passwordRule: '密码不能少于6位'
}
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
i18n实例对象
// i18n/index.js
import { createI18n } from 'vue-i18n'
import zhLocale from './lang/zh'
import enLocale from './lang/en'
import store from '@/store'
const messages = {
en: {
msg: {
...enLocale
}
},
zh: {
msg: {
...zhLocale
}
}
}
function getLanguage () {
return store && store.getters && store.getters.language
}
const i18n = createI18n({
// 使用 Composition API 模式，则需要将其设置为 false
legacy: false,
// 全局注入 $t 函数
globalInjection: true,
locale: getLanguage(),
messages
})
export default i18n
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
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
全局注册 i18n对象
// main.js
import i18n from '@/i18n'
app.use(store).use(router).use(i18n).mount('#app')
1
2
3
2
3
在vue页面<template>中使用
<h3 class="title">{{ $t('msg.login.title') }}</h3>
1
在vue页面javascript中使用
import { useI18n } from 'vue-i18n'
const i18n = useI18n()
const message = ref();
message.value = i18n.t('msg.login.usernameRule')
console.log(message);
1
2
3
4
5
2
3
4
5
在js文件中使用
import i18n from '@/i18n';
console.log(i18n.global.t('msg.login.passwordRule'));
1
2
2