Question

我正在使用Vee-Validate插件在我的VueJS应用程序中进行表单验证。因此，我的应用程序使用多种语言，为此，我正在使用 I18n 。我正在使用的所有插件都位于plugins文件夹下的单独文件中，然后获取所有文件并在main.js中注册所有插件，因此在我的Vee-Validate.js中我写了：

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import VeeValidate from 'vee-validate';
import enMessages from "./../locales/validation/en";
import urMessages from "./../locales/validation/ur";

Vue.use(VueI18n);

const i18n = new VueI18n();
i18n.locale = "en";

Vue.use(VeeValidate, {
  errorBagName: 'vErrors',
  i18nRootKey: 'validations',
  i18n,
  dictionary: {
    en: {
      messages: enMessages
    },
    ur: {
      messages: urMessages
    }
  }
});

但是，单击更改语言环境按钮时，请勿更改此文件的语言环境，

我的更改语言环境功能：

changeLocale () {
  this.$i18n.locale == 'en' ? this.$i18n.locale = 'ur' : this.$i18n.locale = 'en'
  this.$vuetify.rtl = this.$i18n.locale == 'ur' ? true : false;
}

Answer 1

嗯，我并不是说您的配置错误。我只想分享一下我的功能，就可以了。

1- vue.config.js

module.exports = {
  transpileDependencies: [
    'vuetify',
  ],

  pluginOptions: {
    i18n: {
      locale: 'en',
      fallbackLocale: 'en',
      localeDir: 'locales',
      enableInSFC: true,
    },
  },
};

2- i18n.ts

import Vue from 'vue';
import VueI18n, { LocaleMessages } from 'vue-i18n';

Vue.use(VueI18n);

function loadLocaleMessages(): LocaleMessages {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i);
  const messages: LocaleMessages = {};
  locales.keys().forEach((key) => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i);
    if (matched && matched.length > 1) {
      const locale = matched[1];
      messages[locale] = locales(key);
    }
  });
  return messages;
}

export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages(),
});

3- main.ts

import Vue from 'vue';

import './registerServiceWorker';
import { sync } from 'vuex-router-sync';
import VueLodash from 'vue-lodash';
import Storage from 'vue-ls';
import vuetify from './plugins/vuetify';
import './utils/vee-validate';


// Components
import './components';

// Application imports
import App from './App.vue';
import router from '@/router';
import store from '@/store';
import i18n from './i18n';

// Sync store with router
sync(store, router);
const options = {
  name: 'ls', // name variable Vue.[ls] or this.[$ls],
  storage: 'local', // storage name session, local, memory
};
Vue.use(Storage, options);
Vue.config.productionTip = false;
Vue.use(VueLodash, { name: 'lodash' });
new Vue({
  router,
  store,
  vuetify,
  i18n,
  render: h => h(App),
}).$mount('#app');

4- src / plugins / vuetify.ts

import Vue from 'vue';
import Vuetify from 'vuetify/lib';


// import VueI18n from 'vue-i18n';
// import i18n from '@/i18n';
import en from '@/locales/en.json';
import jp from '@/locales/jp.json';


Vue.use(Vuetify);


export default new Vuetify({
  lang: {
    locales: { en, jp },
    current: 'jp',
  },
});

5- src / utils / vee-validate.js

/* eslint-disable no-underscore-dangle */
import { extend } from 'vee-validate';
import { required, email, confirmed } from 'vee-validate/dist/rules';
import i18n from '@/i18n';


extend('required', {
  ...required,
  message: (_, values) => i18n.t('GENERAL_VALIDATION_MESSAGES_REQUIRED', values),
});

extend('email', {
  ...email,
  message: (_, values) => i18n.t('LOGIN_FORM_EMAIL_VALID_MESSAGE', values),
});
extend('confirmed', {
  ...confirmed,
  message: (_, values) => i18n.t('CHANGE_PASSWORD_FORM_CONFIRMATION_VALID_MESSAGE', values),
});

6-我使用vuex，所以在我的语言商店中

import Vue from 'vue';
import { localize } from 'vee-validate';
import Vuetify from 'vuetify/lib';
import i18n from '@/i18n';
import en from '@/locales/en.json';
import jp from '@/locales/jp.json';

...

const mutations = {
  SET_LANG(state, data) {
    state.lang = data;
    i18n.locale = data;
    localize(data, jp);
  },
  SET_LANG_ERROR() {
    window.$messageGlobal('Error switching languages');
  },
};

希望有帮助

更改I18n语言环境不适用于Vee-Validate-VueJS

1 个答案: