一、为什么中后台需要国际化
做企业级后台管理系统，很多团队一开始觉得「国内项目用不上国际化」，等业务做到海外或者接了外企客户，才发现整个系统从路由标题到表单校验文案全是硬编码中文------改起来就是一场灾难。
XYGo Admin 作为基于 GoFrame + Vue3 的企业级中后台框架，在设计之初就内置了完整的国际化方案。即使你目前的项目只有中文需求，预留好多语言架构也能大幅降低未来的迁移成本。
二、XYGo Admin 的国际化架构
XYGo Admin 的国际化基于 vue-i18n 实现，内置简体中文和英文两套语言包。核心目录结构：
```
web/src/locales/
├── index.ts # i18n 实例创建与配置
└── langs/
├── zh.json # 简体中文
└── en.json # English
```
在 `locales/index.ts` 中完成 i18n 实例的创建：
```typescript
import { createI18n } from 'vue-i18n'
import zh from './langs/zh.json'
import en from './langs/en.json'
const i18n = createI18n({
locale: 'zh', // 默认语言
fallbackLocale: 'en', // 回退语言
messages: { zh, en }
})
```
语言偏好会自动保存到 localStorage，下次访问时恢复------这个细节在实际使用中非常实用，避免了用户每次登录都要重新切换语言。
三、模板与脚本中的使用方式
模板中使用
```vue
<template>
<h1>{{ $t('dashboard.title') }}</h1>
<p>{{ $t('common.welcome', { name: username }) }}</p>
</template>
```
支持参数插值，`{name}` 会被动态替换为实际用户名。
脚本中使用
```typescript
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
console.log(t('common.success'))
```
四、语言包的规范组织
推荐按功能模块划分 key 的层级结构：
```json
{
"common": {
"success": "操作成功",
"failed": "操作失败",
"confirm": "确定",
"cancel": "取消"
},
"dashboard": {
"title": "控制台"
},
"user": {
"add": "新增用户",
"edit": "编辑用户"
}
}
```
这种分层方式让语言文件清晰可维护，团队协作时也不容易产生 key 冲突。
五、语言切换与 Element Plus 联动
前台布局中提供了语言切换按钮，切换后会同步完成三件事：
-
更新 i18n locale
-
保存到 localStorage
-
更新 Element Plus 的语言包
这一步是很多 Vue3 后台管理框架容易忽略的点------只切换了自己的文案，Element Plus 的日期选择器、分页组件却还是原来的语言。XYGo Admin 在切换时联动更新了 UI 组件库的语言包，体验上完全无缝。
六、添加新语言
需要支持日语、韩语或其他语言时，三步即可：
-
在 `locales/langs/` 下新建语言文件，如 `ja.json`
-
在 `locales/index.ts` 中导入并注册
-
在语言切换组件中添加选项
整个流程不涉及框架层面的改动，扩展成本极低。
七、总结
在国际化这件事上，XYGo Admin 的设计思路是做减法：用最小的配置成本覆盖最常见的中英文场景，同时保留足够的扩展性应对未来的多语言需求。对于用 Vue3 做后台管理框架的团队来说，这种「开箱即用 + 按需扩展」的模式比从零搭建要高效得多。
更多技术细节可以参考 XYGo Admin 官方文档。