如何使用 vee-validate 和 vue-i18n 翻译字段名称答案

【问题标题】：How to translate field names using vee-validate and vue-i18n如何使用 vee-validate 和 vue-i18n 翻译字段名称
【发布时间】：2019-05-24 11:37:15
【问题描述】：

在我看来，关于 i18n 与 vee-validate 集成的文档是不完整的。如果我将 i18n 与 vee-validate 一起使用，我仍然无法弄清楚如何翻译字段名称。

这是我的 main.js：

import ruValidation from 'vee-validate/dist/locale/ru'
import enValidation from 'vee-validate/dist/locale/en'

Vue.use(VeeValidate, {
  i18nRootKey: 'validations',
  i18n,
  dictionary: {
    en: enValidation,
    ru: ruValidation
  },
  errorBagName: 'vErrors',
  events: ''
})

但问题是 - 我如何翻译属性？我试过了：

import attributesRU from './locales/veevalidate/ru/attributes'

  dictionary: {
    en: enValidation,
    ru: { message: ruValidation, attributes: attributesRU }
  },

attributes.js 的内容：

export const attributes = {
  mail: 'Эл.почта'
}

输入：

<input type="text" name="mail" v-validate="'required|email'">

但是没有成功，如果我添加，甚至消息都没有被翻译：

ru: { message: ruValidation, attributes: attributesRU }

代替：

ru: ruValidation

【问题讨论】：

我不明白你想要什么。是否要自定义字典以显示自定义消息？
@PulkitAggarwal，看看我的<input> 它有一个名称和验证规则 - 必需。如果验证失败，它会显示“需要字段邮件”，并且在我添加了俄语区域设置后，正如我在问题中提到的，它会将其翻译为俄语“поле mail обязательно”。消息本身被翻译，但不是字段名称，在我的例子中是“邮件”，我想将该“邮件”翻译成不同的语言。我希望我解释清楚。
相关问题：stackoverflow.com/q/55045730/841830
medium.com/js-dojo/…我的文章里已经解释过了。

标签： javascript vue.js vee-validate vue-i18n

【解决方案1】：

你可以像这样制作字典

const dictionary = {
  en: {
    messages: {
      required: (field, val) => `Field ${field} is required`
    }
  },
  ru: {
    messages: {
      required: (field, val) => `поле ${field} обязательно`
    }
  },
};

export default dictionary;

你必须将它导入你的组件并像这样添加到验证器库中

this.$validator.localize(dictionary);

希望这能解决您的问题。

【讨论】：

是的，但我使用的是 i18n，而不是 vee-validate 的本地化。

【解决方案2】：

如果不查看更多代码，很难回答您的问题。我已经为您的输入元素here 设置了一个工作代码框。这会在修改 i18n.locale 时成功翻译错误消息和字段。

组件：

<input type="text" name="mail" v-validate="'required|email'" />
{{ errors.first("mail") }}

在 index.js 中设置：

import ru from "vee-validate/dist/locale/ru";
import en from "vee-validate/dist/locale/en";    
import VueI18n from "vue-i18n";

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: "ru"
});

Vue.use(VeeValidate, {
  i18n,
  dictionary: {
    ru: {
      messages: ru.messages,
      attributes: { mail: "Эл.почта" }
    },
    en: {
      messages: en.messages,
      attributes: { mail: "mail test" }
    }
  }
});

【讨论】：

这符合文档的外观：baianat.github.io/vee-validate/guide/…

【解决方案3】：

我可以让它工作，但我不知道这是否是最好的解决方案。

我正在使用 Laravel 和 generator package 从 php lang 文件中创建翻译文件。

JS 文件：

/**
 * For translations in Vue use i18n Package
 */
import VueInternationalization from 'vue-i18n';
import Locale from './vue-i18n-locales.generated';
Vue.use(VueInternationalization);
const i18n = new VueInternationalization({
    locale: 'de',
    messages: Locale
});


/**
 * Form Validation
 */
import VeeValidate from 'vee-validate';
import { ValidationProvider } from 'vee-validate';
import de from 'vee-validate/dist/locale/de';
import en from 'vee-validate/dist/locale/en';
import fr from 'vee-validate/dist/locale/fr';
Vue.use(VeeValidate, {
    i18n,
    dictionary: {
        en: {
            messages: en.messages,
            attributes: Locale.en.attributes, // I use a lang file called attributes
        },
        de: {
            messages: de.messages,
            attributes: Locale.de.attributes,
        },
        fr: {
            messages: fr.messages,
            attributes: Locale.fr.attributes,
        },
    },
});

用于更改 JS 中的语言环境使用：

i18n.locale = 'fr';

对于管理翻译文件，我推荐使用BabelEdit

【讨论】：