국제화

개요

Antdv Next Admin은 vue-i18n을 사용하여 국제화를 구현하며, 중국어(zh-CN)와 영어(en-US) 두 가지 언어를 내장하고 런타임에서의 동적 전환을 지원합니다.

디렉토리 구조

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)를 사용하며, 라우팅 시스템이 자동으로 파싱합니다