项目基于 vue-i18n 实现多语言支持，默认支持中文、繁体中文、英文三种语言切换，并与 Element Plus 语言包无缝集成。

更多用法请参阅 Vue I18n 官方文档。

目录结构

src/i18n/
├─ index.ts                      # i18n 实例配置与导出
├─ admin/                        # 业务模块翻译文件
│  ├─ en.ts                      # 英文翻译
│  ├─ zh-cn.ts                   # 简体中文
│  └─ zh-tw.ts                   # 繁体中文
└─ admin/enum/                   # 枚举翻译文件
   ├─ en.ts
   ├─ zh-cn.ts
   └─ zh-tw.ts

翻译文件按语言代码命名（如 en、zh-cn、zh-tw），统一导出默认对象。所有文件通过 import.meta.glob 自动收集合并。

翻译文件格式

推荐以中文原文作为 Key，值对应目标语言翻译。支持参数插值及特殊语法转义。

基本结构

// src/i18n/admin/en.ts
export default {
  '账号': 'Account',
  '手机号': 'Mobile',
  '确定要删除【{name}】?': 'Are you sure you want to delete [{name}]?',
}

参数格式化

使用 {0}、{1} 或命名参数 {name} 传递动态内容。

// 翻译定义
'{0}秒前': '{0} seconds ago'
'确定要{action}【{name}】?': 'Are you sure you want to {action} [{name}]?'

// 使用
t('{0}秒前', [5])                                   // "5 seconds ago"
t('确定要{action}【{name}】?', { action: t('删除'), name: '张三' })

特殊字符转义

若 Key 中包含模板语法保留字符（如 @、{），需使用 \ 转义。

{
  '代码区块：\\@\\{ //C#代码 \\}': 'Code block: \\@\\{ //C# code \\}',
  '模型名称：\\@(gen.Model.Name)': 'Model Name: \\@(gen.Model.Name)',
}

换行

直接使用 \n 表示换行符。

{
  '一、请按照模板格式准备数据\n二、选择重复数据处理方式': '1. Prepare data per template\n2. Choose duplicate handling',
}

枚举翻译

枚举值翻译独立存放于 src/i18n/admin/enum/ 目录，仅含一级 Key。

// src/i18n/admin/enum/en.ts
export default {
  '男': 'Male',
  '女': 'Female',
  '启用': 'Enabled',
  '禁用': 'Disabled',
}

在组件中通过 t 函数直接使用。

<template>
  <el-tag>{{ t('启用') }}</el-tag>
</template>

在组件中使用

模板中

<template>
  <!-- 普通文本 -->
  <span>{{ t('账号') }}</span>

  <!-- 带参数 -->
  <p>{{ t('确定要删除【{name}】?', { name: row.name }) }}</p>
</template>

Script 中

import { t } from '/@/i18n'

// 直接调用
const message = t('操作成功')

// 带参数
proxy.$modal.confirm(t('确定要{action}【{name}】?', { action: t('删除'), name: userName }))

与 Element Plus 集成

项目已自动将 Element Plus 语言包合并至 i18n 实例，切换语言时组件内部文案同步更新。

// index.ts 已做合并
messages[locale] = {
  el: elementLocales[locale].el,           // Element Plus 语言配置
  ...mergeObjects(fragments),              // 自定义翻译
}

配置与实例

src/i18n/index.ts 负责创建并导出 i18n 实例，同时提供以下便捷方法：

导出项	类型	说明
i18n	I18n	Vue I18n 实例，用于全局注册或插件配置
t	function	翻译函数，等同于i18n.global.t，支持参数插值
locale	WritableComputedRef<string>	响应式当前语言，修改后全局生效
lang	ComputedRef<string>	后端接口所需语言格式（zh-CN | zh-TW | en）

切换语言

通过修改 locale.value 并更新 themeConfig.globalI18n 实现持久化。通常在页面右上角提供下拉菜单供用户切换。

<template>
  <el-dropdown trigger="click" @command="onLanguageChange">
    <div class="lang-icon">
      <i class="iconfont icon-diqiu" :title="t('语言切换')"></i>
    </div>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="zh-cn" :disabled="currentLang === 'zh-cn'">
          {{ t('简体中文') }}
        </el-dropdown-item>
        <el-dropdown-item command="en" :disabled="currentLang === 'en'">
          English
        </el-dropdown-item>
        <el-dropdown-item command="zh-tw" :disabled="currentLang === 'zh-tw'">
          {{ t('繁体中文') }}
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { useThemeConfig } from '/@/stores/themeConfig'
import { t, locale } from '/@/i18n'
import { Local } from '/@/utils/storage'
import other from '/@/utils/other'

const storesThemeConfig = useThemeConfig()
const { themeConfig } = storeToRefs(storesThemeConfig)

// 当前激活的语言
const currentLang = computed(() => themeConfig.value.globalI18n)

// 语言切换
const onLanguageChange = (lang: string) => {
  Local.remove('themeConfig')
  themeConfig.value.globalI18n = lang
  Local.set('themeConfig', themeConfig.value)
  locale.value = lang
  other.useTitle() // 更新页面标题语言
}
</script>

切换后，所有使用 t() 的文本及 Element Plus 组件内部文案均会实时更新。

最佳实践

• Key 命名：始终以中文原文作为 Key，便于阅读与维护。
• 参数顺序：优先使用命名参数 {name}，提高可读性。
• 枚举值：统一放入 enum 目录，避免与业务文本混淆。
• 缺失处理：当前配置未设置 missing 回调，缺失时回退至 Key 本身（即显示中文原文）。

#前端 #前端/Vue #前端/Vue/国际化 #配置文件 #TypeScript