接入国际化，就是在不同的语言环境下使用的用户可以将项目内的语言切换为自己熟悉的一种来显示。
插件 i18n
pnpm install vue-i18n@9
在vue3项目中使用
新建一个文件夹，用来放相关配置和语言文件。
目录结构
i18n
|—— language(存放语言文件)
|—— en.js (英文)
|—— es.js (西班牙语)
|—— zh.js (中文)
|—— index.js (初始化及配置)
// zh.js文件
export default {
"title": "国际化(i18n)",
"description": "在vue3项目中接入国际化"
}
初始化i18n
// index.js文件配置
import { createI18n } from 'vue-i18n'
import zh from './language/zh' // 中文
import en from './language/en' // 英文
import es from './language/es' // 西班牙语
const messages = {
zh,
en,
es
}
//i18n配置
const i18n = createI18n( {
legacy: false, // 在Composition API模式下可用
globalInjection: true, // 全局生效$t
locale: 'zh', // 默认中文
messages,
})
// 切换语言
// 切换语言的值对应messages对象中的属性名
export function changeLocale(language){
i18n.global.locale.value = language
}
export default i18n
main文件中导入初始化配置文件即可开始工作
import i18n from './i18n'
app.use(i18n)
初始化成功后会在当前vue实例上挂在一个 $t 函数, 直接在模板上使用这个函数即可。
<h2>{{ $t('title') }}</h2>
<p>{{ $t('description') }}</p>
i18n对于模板渲染还有很多其它玩儿法，可以去官网看看
UI组件如何使用国际化
这里拿比较常用的vue UI组件 ElementUI 和 VantUI 来示例。
ElementUI element-plus中提供了一个可用于全局配置的组件 ConfigProvider
<!-- 改变locale来控制组件切换语言 -->
<el-config-provider :locale="locale">
<div class="elementui">
<h3>Element UI</h3>
<br>
<el-calendar v-model="value" />
</div>
</el-config-provider>
vant提供了一个组合式api Locale 使用方法
import { Locale } from 'vant';
import zhCN from 'vant/es/locale/lang/zh-CN';
Locale.use('zh-CN', zhCN);
