Vue 3 中高效实现多语言切换需结合 vue-i18n@9 Composition API 与模板语法：启用 globalInjection 后可直接使用 $t() 或 v-t；按模块命名键如 login.form.username.label；支持复数、日期、数字格式化及安全插值；配合 i18n Ally 插件实现智能提取、补全与校验。
在 Vue 3 单文件组件（SFC）中实现多语言文本的高效切换，核心是结合 vue-i18n@9 的 Composition API 模式与模板语法的简洁写法，避免冗余逻辑、提升可读性和维护性。关键不在于“写得多”，而在于“配得准、用得顺、切得稳”。
直接在 template 中用 $t() 或 v-t 指令
只要全局配置了 globalInjection: true（推荐），所有组件模板中可直接使用 $t() 方法或 v-t 指令，无需每次 import 或 setup 解构。
-
{{ $t('button.save') }}—— 最常用，适合带插值或动态键的场景，例如{{ $t('form.fieldRequired', { field: '用户名' }) }} -
<span v-t="'button.cancel'"></span>—— 更轻量，纯静态文本推荐，不触发响应式依赖，性能略优 - 支持嵌套路径，如
$t('menu.device.detail.title')，对应 JSON 中{"menu": {"device": {"detail": {"title": "设备详情"}}}}
按模块组织语言键，避免全局扁平化
不要把所有翻译塞进一个大对象里。按业务模块拆分 key 命名，既利于协作，也方便 i18n Ally 插件自动提取和校验。
- 推荐命名风格：
[模块].[功能].[描述]，例如login.form.username.label、table.action.delete.confirm - 语言文件保持结构一致，比如
zh-CN.json和en-US.json的 key 层级完全对齐 - 组件内只关心自己用到的 key，无需了解其他模块的翻译结构
处理动态内容与复数/性别等复杂场景
简单替换文字只是起点；真实项目常需格式化日期、数字、复数、甚至不同性别的动词变位——这些都靠 vue-i18n 内置能力支撑。
立即学习“前端免费学习笔记（深入）”；
- 复数：在语言文件中用数组定义，如
"itemCount": ["{count} 个项目", "{count} 个项目"]，模板中{{ $t('itemCount', count) }}自动选合适项 - 日期/数字：配合
$d()和$n()，例如{{ $d(new Date(), 'short') }}或{{ $n(123456.78, 'currency') }} - 插值安全：默认开启 HTML 转义，若需渲染富文本，改用
v-html="$t('notice.content', {}, {interpolate: false})"并确保内容可信
配合 i18n Ally 插件实现“边写边译”工作流
VS Code 的 i18n Ally 插件能极大提升效率，让多语言开发接近“零感”：
- 鼠标悬停显示当前 key 在各语言中的翻译，缺失时标红提醒
- 快捷键
Ctrl+Shift+P → i18n Ally: Extract from selection可一键把字符串提取为 key 并写入对应语言文件 - 支持自动补全 key，输入
$t('log就提示login.form...等已定义路径 - 检测未使用或重复 key，降低语言包膨胀风险
