国际化

🌐 国际化

项目支持多种语言，可在 src/locales/ 目录下添加或修改语言资源：

• 英文 (en)
• 中文简体 (zh)
• 中文繁体 (zh-TW)

添加新语言

1. 在 src/locales/ 目录下创建新的语言文件夹
2. 添加对应的 JSON 资源文件
3. 在 src/locales/language.config.ts 中注册新语言

语言资源结构

src/locales/
├── en/          # 英文资源
│   ├── common.json
│   ├── search.json
│   └── settings.json
├── zh/          # 中文简体资源
│   ├── common.json
│   ├── search.json
│   └── settings.json
├── zh-TW/       # 中文繁体资源
│   ├── common.json
│   ├── search.json
│   └── settings.json
└── language.config.ts  # 语言配置

使用翻译

在 Vue 组件中使用 useI18n 钩子函数获取翻译文本：

<template>
  <div>
    <h1>{{ t('common.title') }}</h1>
    <p>{{ t('search.placeholder') }}</p>
  </div>
</template>

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

const { t } = useI18n()
</script>

动态切换语言

使用 i18n.global.locale 或 useI18n 返回的 locale 方法切换语言：

// 方法一：直接设置全局语言
i18n.global.locale.value = 'en'

// 方法二：使用 useI18n 返回的 locale 方法
const { locale } = useI18n()
locale.value = 'en'