如何配置i18next以支持JSON嵌套翻译值的查找？

嘿，我来帮你搞定这个i18next的配置问题！你当前的配置里有个关键误区——resources字段是用来直接存放翻译内容的，而不是指定加载路径的。要实现你要的嵌套翻译结构+点语法调用，有两种常用方案，我分别给你拆解清楚：

方案一：直接内嵌翻译内容（适合小型项目） #

如果你的翻译内容不多，可以直接把嵌套结构的翻译数据写在resources的translation字段里，i18next默认支持点语法调用嵌套属性：

i18next.init({
  lng: 'en',
  debug: true,
  // 直接将嵌套的翻译内容写入resources
  resources: {
    en: {
      translation: {
        "commands": {
          "help": {
            "description": "Some description."
          }
        }
      }
    },
    nl: {
      translation: {
        "commands": {
          "help": {
            "description": "Een beschrijving."
          }
        }
      }
    }
  }
});

// 直接用点语法调用即可
console.log(i18next.t('commands.help.description')); // 输出 "Some description."

方案二：用Backend插件加载外部JSON文件（适合大型项目） #

如果翻译内容较多，希望单独维护JSON文件，需要使用i18next-http-backend插件来加载外部文件，步骤如下：

1. 先安装插件：

npm install i18next-http-backend

2. 配置i18next，通过插件指定翻译文件的加载路径：

import i18next from 'i18next';
import Backend from 'i18next-http-backend';

// 注册并初始化i18next
i18next
  .use(Backend) // 启用Backend插件
  .init({
    lng: 'en',
    debug: true,
    fallbackLng: 'en', // 可选：当指定语言文件不存在时，回退到英文
    // 配置插件的加载路径，{{lng}}会自动替换为当前语言标识（en/nl）
    backend: {
      loadPath: '../locales/{{lng}}.json'
    }
    // 注意：这里不需要手动写resources，插件会自动加载对应语言的JSON文件
  });

// 由于是异步加载，建议在初始化完成后调用翻译
i18next.init().then(() => {
  console.log(i18next.t('commands.help.description')); // 输出对应JSON里的内容
});

3. 你的外部翻译文件（比如../locales/en.json）保持你想要的嵌套结构即可：

{
  "commands": {
    "help": {
      "description": "Some description."
    }
  }
}

关键说明 #

t('commands.help.description')这种点语法是i18next的默认特性，只要你的翻译数据是嵌套对象结构（不管是内嵌还是通过插件加载），都可以直接使用该语法访问深层属性。

内容的提问来源于stack exchange，提问作者user10471818