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

Question

我在我的 VueJS 应用程序中使用 Vee-Validate 插件进行表单验证。所以，我的应用程序有超过 1 种语言，为此，我使用 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');
  },
};

希望对你有帮助