Vue i18n配置后无法显示本地化key的问题及解决方案问询

问题根因 #

你的配置不生效是因为当你为not-a-language配置空字符串作为回退语言时，Vue I18n会识别为无效回退目标，自动命中你配置的default: 'en'规则，回退到英文翻译，因此无法显示本地化key。

解决方案 #

方案1：仅切换到特殊语言标识时显示key（适配你的原有思路） #

调整fallbackLocale配置，给特殊语言标识设置空数组作为回退规则，同时自定义缺失翻译回调返回key即可：

new VueI18n({
  locale,
  fallbackLocale: {
    // 空数组代表该语言不回退到任何其他语言
    'not-a-language': [],
    default: 'en'
  },
  messages,
  // 自定义翻译缺失时的处理逻辑
  missing: (locale, key) => {
    if (locale === 'not-a-language') return key
    // 其他语言场景走默认回退逻辑
    return undefined
  }
})

切换语言的逻辑无需修改，仍用i18n.locale = 'not-a-language'即可生效。

方案2：全局所有翻译缺失场景直接显示key #

如果不需要保留默认的英文回退逻辑，只要翻译不存在就显示key，可直接简化配置：

new VueI18n({
  locale,
  // 关闭所有默认回退逻辑
  fallbackLocale: false,
  messages,
  missing: (_, key) => key
})

Vue3 对应版本（Vue I18n v9）适配 #

如果使用的是Vue3配套的Vue I18n v9版本，配置逻辑基本一致，仅初始化方法调整：

import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  locale: 'not-a-language',
  fallbackLocale: {
    'not-a-language': [],
    default: 'en'
  },
  messages,
  missing: (locale, key) => locale === 'not-a-language' ? key : undefined
})

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