使用jquery.i18n加载外部翻译文件提示无后端加载器错误如何解决

安全阿岳

2026-9-27

问题原因

i18next的插件不会自动注册，必须手动调用i18next.use()方法注册引入的后端插件，这是报错的直接原因。
如果你不需要对接locize云翻译服务，仅加载本地静态JSON翻译文件，更推荐使用更轻量的i18next-http-backend插件而非locize专属后端。

修复方案

修改代码如下：

<body>
  <span data-i18n="foo"></span><br />
  <span data-i18n="bar"></span>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/8.1.0/i18next.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-i18next/1.2.0/jquery-i18next.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/i18next-locize-backend/3.1.3/i18nextLocizeBackend.min.js"></script>
  <script>
    // 新增这一行，手动注册后端插件
    i18next.use(i18nextLocizeBackend);
    
    i18next.init(
      {
        debug: true,
        lng: new URL(window.location.href).searchParams.get('lang'),
        fallbackLng: 'en', // 新增兜底语言，避免lang参数为空时报错
        backend: {
          loadPath: './i18n/{{lng}}/{{ns}}.json',
        },
      },
      function (err, t) {
        jqueryI18next.init(i18next, $);
        $('[data-i18n]').localize();
      },
    );
  </script>
</body>

配套文件结构要求

按你配置的loadPath，需要在项目根目录创建对应文件：

根目录新建i18n文件夹
- 子目录en，新建translation.json，内容为：
```
{
  "foo": "Home",
  "bar": "School"
}
```
- 子目录ru，新建translation.json，内容为：
```
{
  "foo": "Дом",
  "bar": "Школа"
}
```