如何在 Ionic VueJS 中使用 Vue-i18n 自定义来自 Yup/Vee-validate 的表单错误消息

问题描述

我想使用 vue-i18n 来翻译我的表单错误信息。

我编写了一个“lang.ts”文件来构建我的 i18n 实例，如下所示：

import { createI18n } from 'vue-i18n';
import french from './i18n/fr-FR.json';
import english from './i18n/en-US.json';

// push translations to list
const messages = {
    'en-US': french,'fr-FR': english
}

// Create VueI18n instance with options
export const i18n = createI18n({
    locale:"en-US",messages
});

我在“main.ts”中初始化所有这些

...
const app = createApp(App).use(router);

router.isReady().then(() => {
  Device.getLanguageCode().then(function (lang) {
    i18n.global.locale = lang.value; // changing locale using Capacitor locale getter
    app.use(i18n)
      .use(IonicVue)
    app.mount('#app');
  });
});

我正在使用 yup 自定义架构来验证我的表单，这就是我提到我的自定义错误消息的地方，问题是我的架构中没有使用我的“全局”区域设置值，它总是转换为默认值语言（此处为 en-US...）

这是我的架构

export const LoginFormContentSchema = yup
  .object({
    login: yup.object({
      email: yup.string().email(i18n.global.t('wrongMail')).required(i18n.global.t('emptyMail')),// translating my error messages to current global locale 
      password: yup.string().required(i18n.global.t('emptyPassword')),url: yup
        .string()
        .required(i18n.global.t("urlEmpty")).lowercase()
        .matches(/^(https:\/\/)?[a-z0-9._-]+(\.fr)/),}),})
  .required();

因为我在安装应用程序之前更改了语言环境，所以我应该在任何地方都将 fr-FR 作为语言环境，但是当错误消息弹出时，即使我的设备是法语和我的 global.locale 是 fr-FR。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）