项目中的多语言配置主要涉及以下几个文件和目录：
locales/- 存放各语言的翻译文件en_US.json- 英文翻译zh_CN.json- 简体中文翻译zh_TW.json- 繁体中文翻译
src/modules/i18n.ts- i18n 初始化配置src/utils/i18n.ts- i18n 工具函数src/utils/storage.ts- 本地存储工具src/store/models/app.ts- 全局状态管理src/components/LangSwitch.vue- 语言切换组件
多语言实现原理
初始化配置
在 src/modules/i18n.ts 中，通过 vue-i18n 插件初始化多语言配置
语言切换实现
语言切换主要通过以下几个步骤实现：
- 在
src/components/LangSwitch.vue组件中提供语言切换界面 - 在
src/store/models/app.ts中处理语言切换逻辑 - 在
src/utils/i18n.ts中实现语言设置工具函数
本地存储
语言设置通过 src/utils/storage.ts 中的本地存储工具进行持久化
使用方法
在 locales/en_US.json、locales/zh_CN.json 和 locales/zh_TW.json 中添加相应的翻译内容
json
// en_US.json
{
"common": {
"newKey": "New Translation"
}
}
// zh_CN.json
{
"common": {
"newKey": "新翻译"
}
}
// zh_TW.json
{
"common": {
"newKey": "新翻譯"
}
}在 Vue 组件中使用
在 Vue 组件中可以通过 useI18n() 获取 t 函数来使用翻译
vue
<script setup lang="ts">
const { t } = useI18n();
</script>
<template>
<div>{{ t("common.newKey") }}</div>
</template>在 ts 中使用
在 ts 文件中可以通过 utlis 工具获取 $t 函数来使用翻译
ts
import { $t } from "@/utils";
console.log($t("common.newKey"));菜单路由翻译设置
根据路由菜单的 name 属性获取对应的翻译，在 locales/en_US.json、locales/zh_CN.json 和 locales/zh_TW.json 的 route (已有) 下添加相应的翻译内容
对于动态路由的翻译，后台返回的数据格式如下：
接口返回的数据以 "系统管理" 为例
json
{
"path": "/system",
"component": "Layout",
"name": "/system",
"meta": {
"title": "系统管理",
"icon": "material-symbols:jamboard-kiosk",
"hidden": false,
"alwaysShow": false,
"params": null
},
"children": [
{
"path": "user",
"component": "system/user/index",
"name": "User",
"meta": {
"title": "用户管理",
"icon": "ep:user-filled",
"hidden": false,
"keepAlive": true,
"alwaysShow": false,
"params": null
}
},
// ......
]
},⚠️ 注意
当返回的数据 component 为 "Layout" 时，遵循以下规则
如果 component 为 "Layout"，那么我们会默认以 path 做为翻译的键。
- 例如
path为/system，那么默认的翻译键为System。 - 如果
path为/system-management，那么默认的翻译键为SystemManagement。
我们默认会去除 /、_、- 这样的符号，并把单词首字母大写（大驼峰）。
json
// en_US.json
{
"route": {
// ......
"System": "System",
"SystemManagement": "System Management"
}
}
// zh_CN.json
{
"route": {
// ......
"System": "系统",
"SystemManagement": "系统管理"
}
}
// zh_TW.json
{
"route": {
// ......
"System": "系統",
"SystemManagement": "系統管理"
}
}💡 提示
如果未设置翻译键，那么就默认使用 meta 中的 title 做为显示的文本
默认语言设置
默认语言通过 .env.development 和 .env.production 文件中的 VITE_DEFAULT_LANG 变量设置
ini
# 默认多语言 enUS | zhCN | zhTW
VITE_DEFAULT_LANG='zhCN'注意事项
- 语言切换后会重新加载页面以应用新的语言设置
- 语言设置会持久化存储在本地，下次访问时会自动应用上次选择的语言
- 添加新的翻译内容时，需要在所有语言文件中同步添加对应的翻译
nuyoah