i18next无法加载自定义命名空间 配置http-backend后翻译不生效

i18next 加载远端翻译文件异常排查点 #

1. loadPath 配置规则错误 #

当前loadPath写死为固定语言路径，且文件名与默认命名空间不匹配，会导致寻址失败：

• i18next-http-backend 支持{{lng}}（语言变量）、{{ns}}（命名空间变量）占位符动态匹配路径，无需硬编码固定语言路径
• i18next 默认命名空间为translation，当前翻译文件命名为translate.json，与命名空间不匹配，无法对应加载
  修正后的配置示例：

i18next.use(httpAPI).init({
    lng: language,
    backend:{ 
        loadPath: './locales/{{lng}}/translation.json'
    },
    // 显式指定命名空间，与文件名对应
    ns: ['translation'],
    defaultNS: 'translation'
})

修改配置后，将对应语言目录下的translate.json重命名为translation.json。

2. JSON 文件语法不规范 #

给出的翻译文件存在尾随逗号，不符合 JSON 语法标准，会导致浏览器解析文件失败：

// 错误写法：最后一个属性后多余逗号
{"translation": {
  "html1": "backend-de-foo",
  "html2": "backend-de-bar",
}}

修正后的JSON格式：

{
  "translation": {
    "html1": "backend-de-foo",
    "html2": "backend-de-bar"
  }
}

3. 翻译方法调用时机错误 #

加载远端翻译文件是异步操作，若在init初始化完成前调用t()翻译方法，会因资源未加载完成无法返回正确翻译结果。需要等待初始化异步流程结束后再执行翻译逻辑，示例：

i18next.use(httpAPI).init({
  // 相关配置项
}).then(() => {
  // 初始化完成后再调用翻译方法
  console.log(i18next.t('html1'))
})

4. 路径与请求异常 #

当前使用的绝对路径/locales/xxx从站点根目录寻址，若项目部署在域名子路径下会出现404错误，可替换为相对路径./locales/{{lng}}/translation.json，相对路径相对于执行脚本的HTML文件寻址。
可打开浏览器开发者工具的「网络」面板，直接查看翻译文件的请求状态，排查是否存在404、403、跨域等请求错误。如果是跨域部署的翻译文件，需要服务端配置CORS规则允许当前站点访问。

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