国际化分为两个部分：
- Element Plus 框架国际化（官方提供了国际化方式）
- 自定义国际化（通过 vue-i18n 国际化插件）
# Element Plus 国际化
简单的使用方式请参考 Element Plus 官方文档 - 国际化示例
以下介绍整合 pinia 实现国际化语言切换。
# ConfigProvider 全局配置国际化设置
Element Plus 提供了一个 Vue 组件 ConfigProvider 用于全局配置国际化的设置。
<!-- src/App.vue --> | |
<script setup lang="ts"> | |
import { ElConfigProvider } from 'element-plus'; | |
import { useAppStore } from '@/store/modules/app'; | |
const appStore = useAppStore(); | |
</script> | |
<template> | |
<el-config-provider :locale="appStore.locale" > | |
<router-view /> | |
</el-config-provider> | |
</template> |
# 定义 store
// src/store/modules/app.ts | |
import { defineStore } from 'pinia'; | |
import { useStorage } from '@vueuse/core'; | |
import defaultSettings from '@/settings'; | |
// 导入 Element Plus 中英文语言包 | |
import zhCn from 'element-plus/es/locale/lang/zh-cn'; | |
import en from 'element-plus/es/locale/lang/en'; | |
// setup | |
export const useAppStore = defineStore('app', () => { | |
const language = useStorage('language', defaultSettings.language); | |
/** | |
* 根据语言标识读取对应的语言包 | |
*/ | |
const locale = computed(() => { | |
if (language?.value == 'en') { | |
return en; | |
} else { | |
return zhCn; | |
} | |
}); | |
/** | |
* 切换语言 | |
*/ | |
function changeLanguage(val: string) { | |
language.value = val; | |
} | |
return { | |
language, | |
locale, | |
changeLanguage | |
}; | |
}); |
# 切换语言组件调用
<!-- src/components/LangSelect/index.vue --> | |
<script setup lang="ts"> | |
import { useI18n } from 'vue-i18n'; | |
import SvgIcon from '@/components/SvgIcon/index.vue'; | |
import { useAppStore } from '@/store/modules/app'; | |
const appStore = useAppStore(); | |
const { locale } = useI18n(); | |
function handleLanguageChange(lang: string) { | |
locale.value = lang; | |
appStore.changeLanguage(lang); | |
if (lang == 'en') { | |
ElMessage.success('Switch Language Successful!'); | |
} else { | |
ElMessage.success('切换语言成功！'); | |
} | |
} | |
</script> | |
<template> | |
<el-dropdown trigger="click" @command="handleLanguageChange"> | |
<div> | |
<svg-icon icon-class="language" /> | |
</div> | |
<template #dropdown> | |
<el-dropdown-menu> | |
<el-dropdown-item | |
:disabled="appStore.language === 'zh-cn'" | |
command="zh-cn" | |
> | |
中文 | |
</el-dropdown-item> | |
<el-dropdown-item :disabled="appStore.language === 'en'" command="en"> | |
English | |
</el-dropdown-item> | |
</el-dropdown-menu> | |
</template> | |
</el-dropdown> | |
</template> |
# 效果
从 Element Plus 分页组件看下国际化的效果
# vue-i18n 自定义国际化
i18n 英文全拼 internationalization , 国际化的意思，英文 i 和 n 中间 18 个英文字母
参考：vue-i18n 官方文档 - installation
# 安装 vue-i18n
npm install vue-i18n@9 |
# 自定义语言包
创建 src/lang/package 语言包目录，存放自定义的语言文件
| 中文语言包 zh-cn.ts | 英文语言包 en.ts |
|---|---|
 |  |
# 创建 i18n 实例
// src/lang/index.ts | |
import { createI18n } from 'vue-i18n'; | |
import { useAppStore } from '@/store/modules/app'; | |
const appStore = useAppStore(); | |
// 本地语言包 | |
import enLocale from './package/en'; | |
import zhCnLocale from './package/zh-cn'; | |
const messages = { | |
'zh-cn': { | |
...zhCnLocale | |
}, | |
en: { | |
...enLocale | |
} | |
}; | |
// 创建 i18n 实例 | |
const i18n = createI18n({ | |
legacy: false, | |
locale: appStore.language, | |
messages: messages | |
}); | |
// 导出 i18n 实例 | |
export default i18n; |
# i18n 全局注册
// main.ts | |
// 国际化 | |
import i18n from '@/lang/index'; | |
app.use(i18n).mount('#app'); |
# 页面国际化使用
$t是 i18n 提供的根据 key 从语言包翻译对应的 value 方法
<span>{{ $t("login.title") }}</span>
