国际化

概述

Antdv Next Admin 使用 vue-i18n 实现国际化，内置 四种语言：中文（zh-CN）、英文（en-US）、日文（ja-JP）、韩文（ko-KR），支持运行时动态切换。

目录结构

src/locales/
├── index.ts      # i18n 配置和初始化
├── zh-CN.ts      # 中文语言包（默认）
├── en-US.ts      # 英文语言包
├── ja-JP.ts      # 日文语言包
└── ko-KR.ts      # 韩文语言包

使用方式

在模板中使用

<template>
  <!-- 基本用法 -->
  <span>{{ $t('common.add') }}</span>

  <!-- 带参数 -->
  <span>{{ $t('proTable.total', { total: 100 }) }}</span>
</template>

在 <script setup> 中使用

<script setup lang="ts">
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const title = t('menu.dashboard')
</script>

在非组件中使用

import { $t } from '@/locales'

const message = $t('common.success')

语言包结构

语言包按功能模块组织：

export default {
  common: {
    add: '新增',
    edit: '编辑',
    delete: '删除',
    search: '搜索',
    confirm: '确认',
    cancel: '取消',
    // ...
  },
  menu: {
    dashboard: '仪表盘',
    organization: '组织管理',
    system: '系统管理',
    // ...
  },
  login: {
    title: '登录',
    username: '用户名',
    password: '密码',
    // ...
  },
  // proTable, proForm, user, role, settings, error, validation ...
}

切换语言

语言切换通过布局头部的语言切换按钮实现，当前语言持久化到 localStorage。

添加新语言

1. 创建语言包文件

// src/locales/ja-JP.ts
export default {
  common: {
    add: '追加',
    edit: '編集',
    // ...
  },
  // ...
}

2. 注册语言

在 src/locales/index.ts 中注册新语言：

import jaJP from './ja-JP'

const i18n = createI18n({
  locale: 'zh-CN',
  messages: {
    'zh-CN': zhCN,
    'en-US': enUS,
    'ja-JP': jaJP,  // 日文
    'ko-KR': koKR,  // 韩文
  },
})

3. 添加切换选项

在布局的语言切换组件中添加新语言选项。项目已在 src/components/Layout/LanguageSwitch.vue 中配置了四种语言的选项：

const languages = [
  { code: 'zh-CN', name: '简体中文' },
  { code: 'en-US', name: 'English' },
  { code: 'ja-JP', name: '日本語' },
  { code: 'ko-KR', name: '한국어' },
]

注意事项

• 保持所有语言包的 key 结构一致
• 添加新页面时记得同时更新所有语言包（zh-CN, en-US, ja-JP, ko-KR）
• 菜单标题使用 i18n key（如 menu.dashboard），路由系统会自动解析