【jeecgboot】jeecgboot国际化功能：

---

一、效果：

二、配置：

【官方文档】http://doc.jeecg.com/2043980（文档复制到项目会报错…）
由于jeecg已经安装了i18n就不用安装了，npm install vue-i18n

【1】main.js

// i18n国际化
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
import enLocale from '@/components/lang/en-US'
import zhLocale from '@/components/lang/zh-CN'

// 注册i18n实例并引入语言文件，文件格式等下解析
const i18n = new VueI18n({
    
    
  locale: localStorage.getItem("language") || 'zh-CN',//官网：Vue.ls.get("language", "zh-CN")),这里会报错
  fallbackLocale: 'zh-CN',//没有英文的时候默认中文语言
  silentFallbackWarn: true,//抑制警告
  messages: {
    
    
    'en-US': {
    
     ...enLocale },//官网：'zh-CN': require('@/components/lang/zh-CN.js'),这里引入失败
    'zh-CN': {
    
     ...zhLocale }
  }
})

function main() {
    
    
  new Vue({
    
    
    router,
    store,
    i18n,//别忘记了这里
    mounted() {
    
    
      store.commit('SET_SIDEBAR_TYPE', Vue.ls.get(SIDEBAR_TYPE, true))
      store.commit('TOGGLE_THEME', Vue.ls.get(DEFAULT_THEME, config.navTheme))
      store.commit('TOGGLE_LAYOUT_MODE', Vue.ls.get(DEFAULT_LAYOUT_MODE, config.layout))
      store.commit('TOGGLE_FIXED_HEADER', Vue.ls.get(DEFAULT_FIXED_HEADER, config.fixedHeader))
      store.commit('TOGGLE_FIXED_SIDERBAR', Vue.ls.get(DEFAULT_FIXED_SIDEMENU, config.fixSiderbar))
      store.commit('TOGGLE_CONTENT_WIDTH', Vue.ls.get(DEFAULT_CONTENT_WIDTH_TYPE, config.contentWidth))
      store.commit('TOGGLE_FIXED_HEADER_HIDDEN', Vue.ls.get(DEFAULT_FIXED_HEADER_HIDDEN, config.autoHideHeader))
      store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak))
      store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))
      store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
      store.commit('SET_MULTI_PAGE', Vue.ls.get(DEFAULT_MULTI_PAGE, config.multipage))
    },
    render: h => h(App)
  }).$mount('#app')
}

【2】App.vue

<template>
  <a-config-provider :locale="locale">
    <div id="app">
      <router-view />
    </div>
  </a-config-provider>
</template>
<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN'
import enUS from 'ant-design-vue/lib/locale-provider/en_US'
import enquireScreen from '@/utils/device'
import {
    
     mapState } from 'vuex';

export default {
    
    
  data() {
    
    
    return {
    
    
      locale: zhCN,
    }
  },
  computed: {
    
    
    ...mapState(['language']),
  },
  watch: {
    
    
    language: {
    
    
      handler(value) {
    
    
        if (value != null) {
    
    
          //获取本地缓存中的语言配置，并切换
          if (!value || value == 'zh-CN') {
    
    
            this.locale = zhCN
          } else if (value == 'en-US') {
    
    
            this.locale = enUS
          }
          this.$i18n.locale = value;//关键语句    
        }
      },
      immediate: true,
    }
  },
  created() {
    
    
    let that = this
    enquireScreen(deviceType => {
    
    
      // tablet
      if (deviceType === 0) {
    
    
        that.$store.commit('TOGGLE_DEVICE', 'mobile')
        that.$store.dispatch('setSidebar', false)
      }
      // mobile
      else if (deviceType === 1) {
    
    
        that.$store.commit('TOGGLE_DEVICE', 'mobile')
        that.$store.dispatch('setSidebar', false)
      }
      else {
    
    
        that.$store.commit('TOGGLE_DEVICE', 'desktop')
        that.$store.dispatch('setSidebar', true)
      }
    })
  }
}
</script>

【3】zh-CN.js和en-US.js文件

【4】Login.vue设置切换功能

<!-- 中英文切换 -->
<a-radio-group v-model="language" @change="handleSetLanguage">
   <a-radio :value="'zh-CN'">{
    
    {
    
     $t("login.Chinese") }}</a-radio>
   <a-radio :value="'en-US'">{
    
    {
    
     $t("login.English") }}</a-radio>
</a-radio-group>

【5】设置store

const language = 'language' //国际化

export default new Vuex.Store({
    
    
  state: {
    
    
    language: getStore(language),//国际化
  },
  mutations: {
    
    
    setLanguage(state, data) {
    
    
      state.language = data
      setStore(language, state.language)
    },
  },
  actions: {
    
    

  },
  getters
})

三、使用：

<a-button>{
    
    {
    
     $t('common.submit') }}</a-button>


<a-input v-model="model.username" size="large" :placeholder="$t('login.pleaseEnterYourAccountName')" />


<a-form-item :label="$t('layout.deptName')">
    <a-select v-model="formData.deptId" :placeholder="$t('common.pleaseSelect') + $t('layout.deptName')"></a-select>
</a-form-item>


 username: [
    {
    
     required: true, message: this.$t('login.pleaseEnterYourAccountName') },
    {
    
     validator: this.handleUsernameOrEmail }
],