国際化

概要

Antdv Next Admin は vue-i18n を使用して国際化を実装し、中国語（zh-CN）と英語（en-US）の2つの言語を内蔵し、ランタイムでの動的な切り替えをサポートしています。

ディレクトリ構造

src/locales/
├── index.ts      # i18n 設定と初期化
├── zh-CN.ts      # 中国語言語パック
└── en-US.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,  // 新しい言語
  },
})

3. 切り替えオプションの追加

レイアウトの言語切り替えコンポーネントに新しい言語オプションを追加します。

注意事項

• すべての言語パックの key 構造を一貫させてください
• 新しいページを追加する際は、すべての言語パックを同時に更新することを忘れないでください
• メニュータイトルは i18n key（例：menu.dashboard）を使用し、ルーティングシステムが自動的に解析します