Vue.js中i18next单翻译字符串回退/默认值配置问题

嘿，我懂你碰到的麻烦了——明明设了fallbackLng: 'en'，但FR语言环境下空字符串的翻译项就是不回退，反而输出空内容。这其实是i18next的默认行为导致的，不过只要加两个配置就能轻松搞定！

问题根源 #

i18next默认只有当翻译项完全不存在时才会触发fallback逻辑。而像FR里的"no":""这种情况，属于“翻译项存在但内容为空”，默认不会触发回退。

解决方案：开启空值回退配置 #

在i18next的初始化配置里，加上fallbackOnEmpty: true和fallbackOnNull: true这两个选项，就能让空字符串和null值的翻译项自动回退到fallback语言的对应内容。

修改后的完整初始化代码示例：

i18next.use(languageDetector).init({
  fallbackLng: 'en',
  load: 'languageOnly',
  // 你的语言检测配置（比如检测优先级、存储方式等）
  detection: {
    order: ['navigator', 'cookie'],
    lookupCookie: 'i18next',
    // 其他检测相关配置...
  },
  // 关键配置：开启空值和null的回退
  fallbackOnEmpty: true,
  fallbackOnNull: true,
  // 其他你需要的配置（比如插值规则、资源加载等）
});

效果验证 #

当你的Vue应用运行在FR语言环境时，调用{{ i18n.t('base:no') }}，因为FR的"no"是空字符串，i18next会自动去en的base.json里找对应的"no":"no"，最终输出正确的"no"而不是空字符串。

如果你的项目是用vue-i18n结合i18next的，这个配置同样生效，因为底层翻译逻辑还是由i18next处理的。

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