乐闻世界logo
6月1日 09:25

i18next-http-backend 怎么远程加载翻译资源？配置/缓存/SSR

i18next-http-backend 是 i18next 官方的远程翻译资源加载插件，核心配置项 loadPath 指定资源 URL 模板，支持 {{lng}} 和 {{ns}} 占位符，插件会在初始化或切换语言时自动请求对应 JSON 文件。savePath 用于回写（如新增 key 时持久化），默认 /locales/add/{{lng}}/{{ns}}。自定义请求可通过 request 选项替换默认 fetch 实现，适用于需要加鉴权头或自定义错误处理的场景。缓存方面，配合 i18next-localstorage-backend 可将已加载资源缓存到浏览器本地，设定过期时间避免重复请求。重试机制通过 reloadInterval 控制定时重新加载，也可在加载失败时调用 i18n.reloadResources() 手动触发。SSR 场景下使用 i18next-fs-backend 从文件系统读取资源，接口与 http-backend 一致。

追问

如何给请求添加自定义 Header？

通过 request 选项覆盖默认实现：

js
backend: {
  loadPath: '/api/locales/{{lng}}/{{ns}}',
  request: (url, payload, callback) => {
    fetch(url, {
      headers: { Authorization: 'Bearer xxx' }
    })
      .then(res => res.json())
      .then(data => callback(null, { data, status: 200 }))
      .catch(err => callback(err));
  }
}

如何实现多语言批量加载？

设置 allowMultiLoading: true，loadPath 中使用 {{lng}} 和 {{ns}} 会以 + 连接多个值，服务端需支持返回合并后的 JSON。例如请求 /locales/en+zh/common+admin 返回对应结构，减少请求次数。

加载失败如何降级？

配置 backend 的同时设置 fallbackLng，当目标语言资源加载失败时 i18next 会回退到 fallback 语言。也可监听 failedLoading 事件做上报和兜底提示：

js
i18n.on('failedLoading', (lng, ns, msg) => {
  console.error(`${lng}/${ns} 加载失败:`, msg);
});

SSR 中如何使用 fs-backend？

js
const FsBackend = require('i18next-fs-backend');

i18n.use(FsBackend).init({
  backend: {
    loadPath: './locales/{{lng}}/{{ns}}.json'
  }
});

读取本地文件系统而非发 HTTP 请求，接口与 http-backend 一致，SSR 预渲染时确保同步拿到翻译内容。

标签：i18next