Ionic VueJS中使用Vue-i18n自定义Yup表单错误消息时Locale不生效问题求助

我看到你遇到的表单错误翻译不跟随语言切换的问题了，这里有两个关键问题需要修正：

1. 语言包映射完全搞反了 #

先看你的lang.ts文件，你把语言代码和对应包的关系写反了：

// 错误写法
const messages = {
  'en-US': french, // 把法语包绑定给了英语语言码
  'fr-FR': english // 把英语包绑定给了法语语言码
}

这直接导致你切换到fr-FR locale时，实际加载的是英语翻译包，必须修正为：

// 正确写法
const messages = {
  'en-US': english,
  'fr-FR': french
}

2. Yup错误消息是静态值，无法动态响应语言切换 #

你现在在Schema里直接调用i18n.global.t('xxx')，这行代码会在Schema初始化时就立即执行，把当时的翻译结果固定下来，后续语言切换后不会重新计算。

解决方法是用箭头函数延迟执行翻译方法，让错误消息在每次验证时才动态获取当前locale的内容：

export const LoginFormContentSchema = yup
  .object({
    login: yup.object({
      email: yup.string()
        .email(() => i18n.global.t('wrongMail')) // 箭头函数延迟执行翻译
        .required(() => i18n.global.t('emptyMail')),
      password: yup.string()
        .required(() => i18n.global.t('emptyPassword')),
      url: yup.string()
        .required(() => i18n.global.t("urlEmpty"))
        .lowercase()
        .matches(/^(https:\/\/)?[a-z0-9._-]+(\.fr)/, () => i18n.global.t('invalidUrl')), // 匹配错误也用同样方式
    }),
  })
  .required();

这样每次触发表单验证时，都会根据当前的全局locale获取最新的翻译内容，语言切换后错误消息就能同步更新了。

额外提醒：请确认Device.getLanguageCode()返回的lang.value是标准的'en-US'或'fr-FR'格式，避免因语言码格式不匹配导致加载错误的语言包。

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