本文旨在解决 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 组件中：
<template>
<div>
<p>通过 $t('parent.child1') 获取: {{ $t('parent.child1') }}</p>
<p>通过 $t('parent') 获取: {{ $t('parent') }}</p>
<p>通过 $t('user') 获取: {{ $t('user') }}</p>
</div>
</template>
<script setup>
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
// 在控制台查看
console.log("t('parent.child1'):", t('parent.child1')); // 输出: a
console.log("t('parent'):", t('parent')); // 输出: parent (字符串)
console.log("t('user'):", t('user')); // 输出: user (字符串)
</script>可以看到，直接访问 parent 或 user 键时，$t 方法返回了键名字符串，而非期望的嵌套对象。
3. 解决方案：实现深度翻译插件 $td
为了解决这个问题，我们可以创建一个自定义的工具函数或插件，它能够递归地遍历一个翻译键所指向的原始消息结构，并在遍历过程中对所有叶子节点（即实际的翻译字符串）进行翻译。我们将这个功能封装成一个名为 $td (translate deep) 的方法。
以下是实现此插件的步骤和代码：
3.1 创建插件文件
在您的项目中创建一个插件文件，例如 plugins/i18n-deep-translate.js。
// plugins/i18n-deep-translate.js
import { 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) 函数
// <T> 泛型用于类型推断，使返回类型更准确
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.js
import { 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 函数) 来深度访问翻译对象了。
<template>
<div>
<h2>使用 $td 深度翻译</h2>
<p>通过 $t('parent.child1') 获取: {{ $t('parent.child1') }}</p>
<p>通过 $td('parent') 获取整个对象:</p>
<pre class="brush:php;toolbar:false;">{{ $td('parent') }}
通过 $td('user') 获取用户对象:
{{ $td('user') }}
访问深度翻译对象的属性:
Parent Child1: {{ $td('parent').child1 }}
User Name: {{ $td('user').name }}
<script setup> import { useI18n } from 'vue-i18n'; // 如果您想在 setup 脚本中直接使用 td 函数，可以从插件文件导入 import { td } from '../plugins/i18n-deep-translate.js'; const { t } = useI18n(); // 在控制台查看 console.log("t('parent.child1'):", t('parent.child1')); console.log("td('parent'):", td('parent')); console.log("td('user'):", td('user')); </script>输出示例:
通过 $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: a
User 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 方法。
