i18next加载翻译文件返回404，如何兼顾pt-BR加载与避免报错？

问题根因 #

• i18next默认load配置为all，会优先加载带区域码的完整语言资源：当浏览器语言为en-US时会先请求en-US.json，你没有该文件所以返回404，之后才会走回退逻辑加载en的资源。
• 当你设置load: 'languageOnly'时，i18next只会截取语言的主代码，pt-BR会被截断为pt，所以只会加载pt.json，无法命中你存在的pt-BR资源。

解决方案1：自定义loadPath路径逻辑（推荐） #

i18next-http-backend的loadPath和addPath支持传入函数做动态匹配，你可以直接根据现有翻译文件配置映射规则，不会产生多余的404请求，也不需要修改其他全局配置：

.init({
  fallbackLng: 'en',
  supportedLngs: ['en', 'pt', 'pt-BR'],
  nonExplicitSupportedLngs: true,

  backend: {
    backends: [
      LocalStorageBackend, // primary
      HttpBackend, // fallback
    ],
    backendOptions: [
      {
        prefix: 'i18next_res_',
        defaultVersion: version,
      },
      {
        // 改为函数动态返回资源路径
        loadPath: (lngs, namespaces) => {
          const currentLng = lngs[0]
          const currentNs = namespaces[0]
          if (currentLng.startsWith('en')) return `${some-path}/${currentNs}/en.json`
          if (currentLng === 'pt-BR') return `${some-path}/${currentNs}/pt-BR.json`
          if (currentLng.startsWith('pt')) return `${some-path}/${currentNs}/pt.json`
          // 其他未知语言默认走英语
          return `${some-path}/${currentNs}/en.json`
        },
        addPath: (lng, namespace) => {
          if (lng.startsWith('en')) return `${some-path}/${namespace}/en`
          if (lng === 'pt-BR') return `${some-path}/${namespace}/pt-BR`
          if (lng.startsWith('pt')) return `${some-path}/${namespace}/pt`
          return `${some-path}/${namespace}/en`
        },
        queryStringParams: { v: version },
      },
    ],
  },
})

解决方案2：配置全局语言回退规则 #

如果你不想修改backend的路径配置，也可以调整全局语言匹配规则，明确指定不同语言变体的回退逻辑，同时关闭非明确支持语言的匹配：

.init({
  fallbackLng: {
    'en-*': ['en'], // 所有英语变体直接回退到通用英语，不会请求对应区域码资源
    'pt-*': ['pt-BR', 'pt'], // 葡萄牙语变体优先匹配pt-BR，再回退到通用葡萄牙语
    'default': ['en']
  },
  supportedLngs: ['en', 'pt', 'pt-BR'],
  nonExplicitSupportedLngs: false, // 关闭非明确在支持列表里的语言匹配
  // 其余原有配置保持不变
  backend: {
    // 原有backend配置
  }
})

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