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 })插值
覆盖所有文本场景：不只是模板里的文字
国际化要扫到每个角落，否则切换语言后会出现“半边中文半边英文”的尴尬：
-
模板中：用
{{ $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 时实时同步 - 两者搭配可形成闭环：扫描 → 翻译 → 回显 → 校对 → 发布，大幅降低维护成本
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
