vue-i18n是Vue项目国际化最主流、最稳妥的方案，提供动态切换、格式化、作用域隔离和TypeScript支持，推荐Vue 3用v11+、Vue 2用v9，需按模块组织语言文件、避免手动管理locale状态，并配合DuI18N与i18n Ally提升开发效率。
用 vue-i18n 是最主流、最稳妥的方案，尤其适合中大型 Vue 项目。它不是简单替换文字，而是提供一套完整的语言管理机制，包括动态切换、格式化、作用域隔离和类型支持。
选对工具：优先用 vue-i18n（Vue 3 推荐 v11+）
它由 Vue 官方团队维护，深度适配 Composition API 和 TypeScript，支持按模块加载语言包、自动 fallback、复数/日期/数字本地化等。不建议自己手写 locale 切换逻辑——容易漏掉响应式更新、组件内消息作用域、插值语法等细节。
- 安装命令：
npm install vue-i18n@11（Vue 3）或npm install vue-i18n@9（Vue 2） - 避免混用多个 i18n 库（如同时引入 vue-i18n 和 vuex-i18n），会造成状态冲突和调试困难
- 若项目已用 Pinia/Vuex，不要把 locale 存在 store 里单独管理，应交由 i18n 实例统一控制，否则 $t 响应式会失效
组织语言资源：按模块分文件，别堆在一个大 JSON 里
把 messages 按业务或页面拆开，比如 src/i18n/modules/user.ts、src/i18n/modules/order.ts，再统一汇总到主配置中。这样既方便协作（不同人维护不同模块），也利于后续做懒加载或按需打包。
- 示例结构：
zh-CN/user.login.title、en-US/user.login.title，层级清晰，避免 key 冲突 - 中文文案作为 key 的原始来源（如
"user.login.title": "登录"），英文翻译靠人工校对，别全信机器翻译 - 预留占位符：像
"order.total": "总计 {amount} 元"，后续用t('order.total', { amount: 99.9 })插值
覆盖所有文本场景：不只是模板里的文字
国际化要扫到每个角落，否则切换语言后会出现“半边中文半边英文”的尴尬：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
-
模板中：用
{{ $t('button.submit') }}或组合式 API 的t('button.submit') -
JS 提示：把
message.error('操作失败')改成message.error(t('common.fail')) -
表单属性：
:placeholder="$t('form.datePlaceholder')"、:title="$t('tooltip.delete')" -
路由元信息：在
meta: { title: 'home.title' }中存 key，通过路由守卫 +useI18n()动态设 document.title
提升开发体验：用插件辅助提取和回显
纯手工改代码效率低、易遗漏。推荐两个 VS Code 插件配合使用：
-
DuI18N：一键扫描整个项目，把硬编码中文转成
$t('xxx')调用，并生成初始语言文件 -
i18n Ally：在编辑器里直接看到
$t('xxx')对应的中文/英文原文，悬停即显，改 key 时实时同步 - 两者搭配可形成闭环：扫描 → 翻译 → 回显 → 校对 → 发布，大幅降低维护成本
不复杂但容易忽略
