Vue 3 国际化 (i18n) 最佳实践指南

1. 安装依赖

npm install vue-i18n@9

2. 项目结构建议

src/

├── i18n/

│   ├── index.ts          # i18n 配置文件

│   ├── languages/        # 语言文件目录

│   │   ├── zh-CN.ts     # 中文

│   │   ├── en-US.ts     # 英文

│   │   └── ...          # 其他语言

│   └── messages/         # 按模块分类的翻译文件

│       ├── common/       # 公共翻译

│       ├── auth/         # 认证相关翻译

│       └── ...          # 其他模块

3. 基础配置

index.tsimport { createI18n } from 'vue-i18n'import zhCN from './languages/zh-CN'import enUS from './languages/en-US'// 获取浏览器语言设置const getBrowserLanguage = () => {  const language = navigator.language.toLowerCase()  const locales = ['zh-cn', 'en-us']  const locale = locales.find(locale => language.includes(locale))