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

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;

export const en = {
    parent: {
       child1: 'a',
       child2: 'b'
    },
    greeting: 'Hello',
    user: {
        name: 'John Doe',
        age: 30
    }
};

<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>

// 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);
  },
};

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

<template>
  <div>
    <h2>使用 $td 深度翻译</h2>
    <p>通过 $t('parent.child1') 获取: {{ $t('parent.child1') }}</p>

    <p>通过 $td('parent') 获取整个对象:</p>
    <pre>{{ $td('parent') }}</pre>

    <p>通过 $td('user') 获取用户对象:</p>
    <pre>{{ $td('user') }}</pre>

    <h3>访问深度翻译对象的属性:</h3>
    <p>Parent Child1: {{ $td('parent').child1 }}</p>
    <p>User Name: {{ $td('user').name }}</p>
  </div>
</template>

<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 Doe