i18next如何将检测到的en-US locale映射到en目录下的翻译文件？

方案1：配置load参数自动截取语言前缀 #

i18next原生支持该配置，开启后会自动忽略区域后缀，仅取语言编码的前两位发起资源请求，是成本最低的通用解决方案：

import i18n from 'i18next'
import Backend from 'i18next-http-backend'
import LanguageDetector from 'i18next-browser-languagedetector'

i18n
  .use(Backend)
  .use(LanguageDetector)
  .init({
    // 核心配置：仅加载语言前缀，自动忽略区域后缀
    load: 'languageOnly',
    fallbackLng: 'zh', // 替换为你自己的兜底语言编码
    // 其余原有配置保持不变即可
    // ...
  })

该配置会自动将所有带区域后缀的语言编码统一转换为基础语言编码，比如en-US/en-GB自动映射到en、zh-CN/zh-TW自动映射到zh，无需单独配置映射规则。

方案2：自定义后端请求路径映射 #

如果需要更灵活的自定义映射规则（比如个别区域需要特殊映射，不通用前缀截取逻辑），可以修改i18next-http-backend的loadPath配置，自行处理语言编码映射：

i18n
  .use(Backend)
  .use(LanguageDetector)
  .init({
    fallbackLng: 'zh',
    backend: {
      // 自定义资源请求路径
      loadPath: (lngs, namespaces) => {
        const currentLng = lngs[0]
        // 自定义映射规则表，可按需新增条目
        const lngMap = {
          'en-US': 'en',
          'en-GB': 'en',
          'zh-TW': 'zh'
        }
        const targetLng = lngMap[currentLng] || currentLng
        return `/public/locales/${targetLng}/${namespaces[0]}.json`
      }
    },
    // 其余原有配置保持不变即可
    // ...
  })

该方案支持任意自定义的语言映射逻辑，适配特殊的业务规则需求。

方案3：配置兜底语言映射 #

如果部分区域语言有独立的翻译资源，不存在对应资源时才走基础语言，可通过fallbackLng配置映射关系：

i18n
  .use(Backend)
  .use(LanguageDetector)
  .init({
    // 配置区域语言的兜底映射
    fallbackLng: {
      'en-US': ['en'],
      'en-GB': ['en'],
      'zh-HK': ['zh'],
      'default': ['zh']
    },
    // 不要配置load: 'languageOnly'，否则会直接截取前缀跳过区域资源加载
    load: 'currentOnly',
    // 其余原有配置保持不变即可
    // ...
  })

该方案会先尝试加载对应区域路径下的资源，加载失败才会请求基础语言路径的资源，适合部分区域有定制翻译的场景。

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