Vue 3 单文件组件怎么实现多语言文本在模板中的高效切换-Vue.js-PHP中文网

vue 3 中高效实现多语言切换需结合 vue-i18n@9 composition api 与模板语法：启用 globalinjection 后可直接使用 $t() 或 v-t；按模块命名键如 login.form.username.label；支持复数、日期、数字格式化及安全插值；配合 i18n ally 插件实现智能提取、补全与校验。

vue 3 单文件组件怎么实现多语言文本在模板中的高效切换

在 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 插件自动提取和校验。

check-vue-style

检查 .vue 单文件组件的 CSS 规范问题并给出提示，适用于样式检查、CSS审查和 Vue 页面质量巡检。

下载

推荐命名风格：[模块].[功能].[描述]，例如 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})" 并确保内容可信