本文旨在解决 Vue 3 中 `vue-i18n` 无法直接通过父级键访问嵌套翻译对象的问题。针对 `legacy: false` 模式下 `$t(‘parent’)` 返回键名而非完整对象的情况，文章将详细介绍如何通过创建自定义的 `$td`（translate deep）插件，实现对多层级翻译消息的递归解析和深度访问，从而获取完整的翻译对象结构，并提供详细代码实现与使用注意事项。
1. vue-i18n v9 在 Vue 3 中的行为变化
在 vue-i18n v9 版本（特别是当 legacy 选项设置为 false 时），其行为与旧版本有所不同。当您尝试使用 $t 方法访问一个指向嵌套对象的键时，例如 this.$t(‘parent’)，它不再返回完整的 JavaScript 对象。相反，它会返回键名本身（例如 ‘parent’），并可能伴随一个警告信息，如 [intlify] Not found ‘parent’ key in ‘en’ locale messages。
这与旧版本 vue-i18n 的行为形成了对比，在旧版本中，this.$t(‘parent’) 能够直接返回 parent 对应的完整对象 { child1: ‘a’, child2: ‘b’ }。然而，对于具体的叶子节点，如 this.$t(‘parent.child1’)，vue-i18n v9 依然能够正确地返回其对应的值 ‘a’。
这种变化意味着，如果您需要获取一个包含多个子翻译项的结构化对象，直接使用 $t 将不再适用。
立即学习“前端免费学习笔记（深入）”；
2. 问题示例
假设我们有以下 i18n 配置和语言文件：
i18n.js
import { createI18n } from 'vue-i18n';import { en } from './locales/en.js';const i18n = createI18n({ locale: 'en', // 设置默认语言 legacy: false, // 禁用兼容模式，Vue 3 推荐设置 messages: { en } // 设置语言消息});export default i18n;
en.js
export const en = { parent: { child1: 'a', child2: 'b' }, greeting: 'Hello', user: { name: 'John Doe', age: 30 }};
在 Vue 组件中：
import { useI18n } from 'vue-i18n';const { t } = useI18n();// 在控制台查看console.log("t('parent.child1'):", t('parent.child1')); // 输出: aconsole.log("t('parent'):", t('parent')); // 输出: parent (字符串)console.log("t('user'):", t('user')); // 输出: user (字符串)通过 $t('parent.child1') 获取: {{ $t('parent.child1') }}
通过 $t('parent') 获取: {{ $t('parent') }}
通过 $t('user') 获取: {{ $t('user') }}
可以看到，直接访问 parent 或 user 键时，$t 方法返回了键名字符串，而非期望的嵌套对象。
3. 解决方案：实现深度翻译插件 $td
为了解决这个问题，我们可以创建一个自定义的工具函数或插件，它能够递归地遍历一个翻译键所指向的原始消息结构，并在遍历过程中对所有叶子节点（即实际的翻译字符串）进行翻译。我们将这个功能封装成一个名为 $td (translate deep) 的方法。
以下是实现此插件的步骤和代码：
3.1 创建插件文件
在您的项目中创建一个插件文件，例如 plugins/i18n-deep-translate.js。
// plugins/i18n-deep-translate.jsimport { useI18n } from 'vue-i18n';// 定义一个递归函数，用于深度遍历和翻译资源const translateDeep = (resource, currentKeypath) => { const { te, rt } = useI18n(); // 1. 如果当前路径本身是一个可翻译的键（即指向一个字符串或简单值） // 则使用 rt (render translation) 获取其翻译后的值 if (te(currentKeypath)) { // 注意：这里的 resource 是 tm(key) 得到的原始值，如果它是字符串，rt会直接返回它 // 如果 resource 是 VueMessageType，rt 会处理插值等 return rt(resource); } // 2. 如果 resource 是一个数组，递归处理数组中的每个元素 else if (Array.isArray(resource)) { return resource.map((item, index) => translateDeep(item, `${currentKeypath}.${index}`) ); } // 3. 如果 resource 是一个对象，递归处理对象中的每个属性 else if (typeof resource === 'object' && resource !== null) { return Object.fromEntries( Object.entries(resource).map(([key, value]) => [ key, translateDeep(value, `${currentKeypath}.${key}`), ]) ); } // 4. 其他情况（如原始类型但不是翻译键），直接返回原始值 // 如果希望这些非翻译键的原始值也保持原样，而不是 undefined，可以返回 resource else { return resource; // 或者返回 undefined，取决于具体需求 }};// 封装成一个 td (translate deep) 函数// 泛型用于类型推断，使返回类型更准确export const td = (key) => { const { tm } = useI18n(); // tm(key) 用于获取给定键的原始消息对象或值 const rawMessage = tm(key); return translateDeep(rawMessage, key);};// 将 td 函数作为全局属性或 provide/inject 提供export default { install(app) { app.config.globalProperties.$td = td; // 如果使用 Composition API，也可以提供给 provide // app.provide('td', td); },};
3.2 在 Vue 应用中注册插件
在您的 main.js 或 main.ts 文件中，导入并使用这个插件。
// main.jsimport { createApp } from 'vue';import App from './App.vue';import i18n from './i18n.js'; // 你的 i18n 实例import i18nDeepTranslatePlugin from './plugins/i18n-deep-translate.js'; // 导入插件const app = createApp(App);app.use(i18n);app.use(i18nDeepTranslatePlugin); // 注册深度翻译插件app.mount('#app');
3.3 使用 $td 方法
现在，您可以在组件中使用 this.$td (或在 Composition API 中通过 inject(‘td’) 或直接导入 td 函数) 来深度访问翻译对象了。
使用 $td 深度翻译
通过 $t('parent.child1') 获取: {{ $t('parent.child1') }}
通过 $td('parent') 获取整个对象:
{{ $td('parent') }}通过 $td('user') 获取用户对象:
{{ $td('user') }}访问深度翻译对象的属性:
Parent Child1: {{ $td('parent').child1 }}
User Name: {{ $td('user').name }}
输出示例:
通过 $t('parent.child1') 获取: a通过 $t('parent') 获取: parent通过 $t('user') 获取: user使用 $td 深度翻译通过 $t('parent.child1') 获取: a通过 $td('parent') 获取整个对象:{ "child1": "a", "child2": "b"}通过 $td('user') 获取用户对象:{ "name": "John Doe", "age": 30}访问深度翻译对象的属性:Parent Child1: aUser Name: John Doe4. 注意事项与局限性
性能考量: translateDeep 函数会递归遍历整个对象结构。对于非常庞大和深层嵌套的翻译对象，这可能会带来一定的性能开销。在实际应用中，请根据需要权衡使用。功能限制:占位符 (Placeholders): $td 插件在设计上主要用于获取结构化数据。它不会像 $t 那样自动处理插值（例如 Hello {name}）。如果您需要获取包含占位符的字符串并进行插值，仍应使用 $t。复数 (Plurals): $td 不支持 vue-i18n 的复数规则。日期/时间/数字格式化: $td 仅处理翻译字符串，不涉及 vue-i18n 提供的日期、时间或数字格式化功能。类型安全: 在 TypeScript 项目中，使用 $td 时，由于其返回类型是动态的，可能需要进行类型断言 或在使用时进行类型检查，以确保类型安全。else 分支处理: 在 translateDeep 函数的 else 分支中，当前代码是 return resource;。这意味着如果遇到非对象、非数组、非翻译键的原始值（如数字、布尔值），它会直接返回该原始值。您可以根据您的具体需求调整此行为，例如，如果希望这些值也转换为 undefined，可以改为 return undefined;。
5. 总结
通过实现自定义的 $td 插件，我们成功解决了 vue-i18n v9 在 Vue 3 中无法直接获取嵌套翻译对象的问题。这个方法允许开发者以结构化的方式访问和使用多层级的翻译消息，从而更好地管理和呈现国际化内容。虽然 $td 提供了深度访问的能力，但请务必注意其功能限制，并在需要插值、复数等高级功能时，继续使用 vue-i18n 提供的标准 $t 方法。
以上就是在 Vue 3 vue-i18n 中深度访问翻译对象及实现方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1539858.html
微信扫一扫
支付宝扫一扫
