在 Vue 3 vue-i18n 中深度访问翻译对象及实现方法-js教程-PHP中文网

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

本文旨在解决 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 组件中：

可以看到，直接访问 parent 或 user 键时，$t 方法返回了键名字符串，而非期望的嵌套对象。

AdsGo AI

全自动 AI 广告专家，助您在数分钟内完成广告搭建、优化及扩量

下载

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');