时间戳

首页 > 解决方案 > 如何将 vee-validate v.2 与 nuxt-i18n 集成？

vue.js - 如何将 vee-validate v.2 与 nuxt-i18n 集成？

问题描述

我正在使用 vee-validate v.2，我想本地化错误消息。我写了一个这样的插件

    import {configure} from 'vee-validate'
export default function ({app}){
    configure({
        defaultMessage:(field,values)=>{
            values._field_=app.i18n.t(`fields.${field}`)
            return app.i18n.t(`validation.${values._rule_}`,values)
        }
    })
}

这是 loacales/en.js

  validation: {
    required: "{_field_} can not be empty",
    min: "{_field_} may not be Less than {length} characters",
    confirmed: "{_field_} do not matches",
    email: "{_field_} is not valid"
  },
  fields: {
    email: 'Email',
    password: 'Password',
    userName: 'Username',
    
  },
  
}

这也是 nuxt 配置中的 $i18n

 i18n: {
    seo: false,
    locales: [
      { code: 'en', iso: 'en-US', file: 'en.js' },
      { code: 'de', iso: 'de-GER', file: 'de.js' }
    ],
    lazy: true,
    langDir: 'locales/',
    baseUrl: process.env.BASE_URL,
    defaultLocale: 'de'
  },

但它不起作用，页面不显示，我收到这样的错误我该 在此处输入图像描述 如何解决？

标签： vue.jsinternationalizationvee-validatenuxt-i18n

解决方案

让我一步一步解释我的解决方案：

步骤 1 ) 安装所需的软件包：

npm install nuxt-i18n --save
npm install vee-validate --save

package.json
{
 "@nuxtjs/i18n": "^7.0.1",
 "vee-validate": "^3.4.12"
}

步骤 2 )在项目的根目录下创建一个名为/locales的文件夹。

步骤 3 )为英文创建文件/locales/en.js

import en from 'vee-validate/dist/locale/en'

export default async (context, locale) => {
  return {
    validation: en.messages,
    email : "email",
  };
}

步骤 4 )为第二语言 (Türkçe)创建文件/locales/tr.js

import en from 'vee-validate/dist/locale/tr'

export default async (context, locale) => {
  return {
    validation: tr.messages,
    email : "e-posta",
  };
}

步骤 5 ) 创建 i18n 插件文件/plugins/i18n.js

import {configure } from "vee-validate";

export default function ({app}) {
    configure({
    defaultMessage: (field, values) => {
      return app.i18n.t(`validation.${values._rule_}`, values);
    }
  });
}

步骤 6 ) 创建一个验证插件文件/plugins/validate.js

import Vue from 'vue'

import { ValidationProvider, ValidationObserver, extend} from 'vee-validate';
import { required, email } from 'vee-validate/dist/rules';

Vue.component('appValidationProvider', ValidationProvider);
Vue.component("appValidationObserver", ValidationObserver);

extend("required", required);
extend("email", email);

注意：我在此示例中使用了“必需”和“电子邮件”规则，如果您想使用更多规则，您可以访问指南页面并添加到此文件中。

所有规则列表：https ://vee-validate.logaretm.com/v2/guide/rules.html

步骤 7 ) nuxt.config -> 插件配置

  plugins: [
    '~/plugins/i18n.js',
    '~/plugins/validate.js',
  ],

步骤 8 ) nuxt.config -> i18n 模块配置

    modules: [
    ['nuxt-i18n', {
      baseUrl: 'https://yourdomain.com',
      lazy: true,
      loadLanguagesAsync: true,
      locales: [
        {
          name: 'English',
          code: 'en',
          iso: 'en-US',
          file: 'en.js'
        },
        {
          name: 'Türkçe',
          code: 'tr',
          iso: 'tr-TR',
          file: 'tr.js'
        },
      ],
      langDir: 'locales/',
      defaultLocale: 'en',
      vueI18n: {
         fallbackLocale: 'en'
      },
      strategy: 'prefix_and_default',
      detectBrowserLanguage: {
        useCookie: true,
        cookieKey: 'i18n_redirected',
        alwaysRedirect: false,
        fallbackLocale: 'en',
        redirectOn: 'root'
      },
      parsePages: false,
      pages: {
        'contact/index': {
          tr: '/iletisim',
          en: '/contact'
        }
      }
    }]
  ],

第 9 步）nuxt.config -> vee-validate 配置添加：

build: {
    transpile: ['vee-validate/dist/rules',
                'vee-validate/dist/locale/tr',
                'vee-validate/dist/locale/en']
  },

用法-> 页面：contact/index.vue

<template>
 <app-validation-observer v-slot="{ handleSubmit }">
   <form class="form" @submit.prevent="handleSubmit(onSubmit)">

      <app-validation-provider rules="required|email" v-slot="{ errors }">
          <input type="text" :name="$t('email')" v-model="formData.email">
          <span class="is-invalid">{{ errors[0]}}</span>
          <button>Test</button>
      </app-validation-provider>

    </form>
 </app-validation-observer>
</template>
<script>
export default {
    name: "contact",
    data() {
      return {
        formData: {
          email: ''
        }
      }
    },
    methods: {
      onSubmit() {
        console.log('form posted :)');
      }
    }
  }
</script>
<style scoped>
  .is-invalid {
    color: red;
  }
</style>

推荐阅读