在 Vue 3 vue-i18n 中深度访问翻译对象及实现方法

陆砚码

2026-10-14 • 👁 0人浏览过

本文旨在解决 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 组件中： Eclipse导入Android或其他的JAVA项目的正确方法 WORD版本文档主要讲述的是Eclipse导入Android或其他的JAVA项目的正确方法；希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看下载

可以看到，直接访问 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) 函数
//  泛型用于类型推断，使返回类型更准确
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 函数) 来深度访问翻译对象了。

输出示例:

通过 $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 Doe

4. 注意事项与局限性性能考量 : 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 方法。

使用 $td 深度翻译

访问深度翻译对象的属性:

相关文章