如何在React项目中结合Phrase App实现i18next翻译资源动态刷新

动态拉取后端翻译并实时生效 #

首先修改i18next初始化配置，移除固定的本地resources配置（也可以保留作为兜底）：

i18n.use(initReactI18next).init({
    lng: 'fr',
    fallbackLng: 'fr',
    interpolation: {
        escapeValue: false
    }
})

然后封装翻译刷新方法，调用i18next内置API直接替换运行时的翻译资源：

import axios from 'axios'
import i18n from 'i18next'

// lang参数为要刷新的语言，默认取当前正在使用的语言
const refreshTranslations = async (lang = i18n.language) => {
  try {
    // 请求后端接口获取对应语言的最新翻译JSON
    const res = await axios.get(`/your/translation/api?lang=${lang}`)
    const latestTranslations = res.data
    // 全量替换当前语言的translation命名空间资源
    // 后两个参数分别代表覆盖已有资源、深度合并嵌套翻译，按需调整
    i18n.addResourceBundle(lang, 'translation', latestTranslations, true, true)
    // 触发重渲染，所有页面翻译会自动更新为最新版本
    i18n.changeLanguage(lang)
  } catch (e) {
    console.error('翻译资源更新失败', e)
  }
}

最后给触发按钮绑定方法即可：

function UpdateTranslationBtn() {
  return <button onClick={() => refreshTranslations()}>更新最新翻译</button>
}

无需对接后端直接对接Phrase App的方案 #

是可以实现的，操作逻辑如下：

• 进入Phrase App后台开启「Translation Delivery」功能，配置要发布的翻译分支、开放的语言列表，将访问权限设置为公开
• 配置完成后可以拿到每个语言翻译资源的专属CDN直链，前端直接请求该直链即可获取最新翻译，不需要经过自有后端中转
• 在Phrase后台配置你前端站点的域名到CORS白名单，即可解决跨域问题

你之前用到的Phrase React库会弹登录框，是因为该库是面向内部翻译人员的在线校对编辑版本，生产环境使用上述CDN直拉的方式不会出现登录校验逻辑，符合需求。

内容的提问来源于stack exchange，提问作者Mael Geoffroy