Vue 3 国际化 (i18n) 最佳实践指南
1. 安装依赖
npm install vue-i18n@92. 项目结构建议
src/
├── i18n/
│ ├── index.ts # i18n 配置文件
│ ├── languages/ # 语言文件目录
│ │ ├── zh-CN.ts # 中文
│ │ ├── en-US.ts # 英文
│ │ └── ... # 其他语言
│ └── messages/ # 按模块分类的翻译文件
│ ├── common/ # 公共翻译
│ ├── auth/ # 认证相关翻译
│ └── ... # 其他模块
3. 基础配置
index.ts
import { 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))