vue项目国际化以“语言可切换、文案可维护、组件可复用”为核心，主流采用vue-i18n@9.1.9（uni-app）或@next（vue3+vite），配合i18n ally插件提效，并支持petite-vue-i18n轻量替代及组件库适配。
Vue 项目集成国际化（i18n）不是堆砌配置，而是围绕“语言可切换、文案可维护、组件可复用”三个核心目标来组织。主流方案以 vue-i18n 为主力，配合工程化工具提升协作效率。
vue-i18n 基础集成（Vue 3 推荐）
这是最稳定、生态最成熟的方案，适用于绝大多数中后台与业务应用：
- 安装固定兼容版本：npm install vue-i18n@9.1.9（uni-app）或 vue-i18n@next（纯 Vue 3 + Vite）
- 语言包建议按 locale 目录结构组织，如 src/locales/en-US.json、src/locales/zh-CN.json，内容为扁平或嵌套键值对
- 创建 i18n 实例时启用 Composition API 模式：
legacy: false，并设置globalInjection: true让$t在模板中直接可用 - 默认语言取自 localStorage 或
uni.getStorageSync('currentLang')（uni-app）， fallbackLocale 保证缺失翻译时有兜底
轻量级替代：petite-vue-i18n
适合资源敏感型项目（如微前端子应用、IoT 控制面板），只保留核心翻译能力：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 体积压缩至约 5.5KB（brotli），移除日期/数字格式化等非必需功能
- API 与 vue-i18n 完全一致，未来可无缝升级
- 不依赖构建工具，支持 CDN 直接引入：
<script src="https://unpkg.com/petite-vue-i18n"></script> - 适合仅需静态文案翻译、无复杂本地化格式需求的场景
工程化提效：i18n Ally 插件协同
解决多人协作中最耗时的“键同步”和“漏翻”问题：
- VS Code 安装 i18n Ally 后，自动扫描
$t('xxx')和v-t指令，实时提示缺失翻译 - 配置
"i18n-ally.keystyle": "nested"支持button.submit.confirm这类语义化键名 - 右键模板区域可一键提取所有硬编码字符串，生成对应 key 并写入各语言文件
- 接入 Google 翻译引擎，支持一键填充初稿，人工校对即可上线
UI 组件库适配要点
Element Plus、WotUI、uView 等主流组件库均提供语言包，但需手动桥接：
- Element Plus：导入
el/locale/lang/zh-cn并调用locale.use(lang) - uni-app + uView：在 main.js 中 new VueI18n 后，再调用
uView.config.i18n(i18n)（如有） - 避免重复初始化：组件库语言应与应用 i18n.locale 保持同步，推荐监听 locale 变更后统一刷新
- 自定义组件内使用
useI18n()组合式函数，比 this.$t 更类型安全
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
