JeecgBoot-antd JeecgVue前端国际化

原官方前端的国际化解决方案：
http://doc.jeecg.com/2043980

1.我的需求说明

在页面中，有个切换语言下拉框，切换语言后，页面切换所选择的语言，并且下次打开默认之前选择语言（目前只要求做到根据浏览器保存到本地。如果需要根据用户，就需要保存到数据库，记录到用户表中）。

注：

由于切换语言后，不刷新页面时效果不理想，有些部分内容不会切换，而且我的用户一般切换一次语言后，很少会再次切换语言，

因此我是通过 window.location.reload() 刷新页面使页面重新加载，完成语言切换

2.版本

Ant Design Jeecg Vue

*====*

当前版本： 2.4.3（发布日期：20210322）

#### 前端技术

- 基础框架：ant-design-vue - Ant Design Of Vue 实现

- JavaScript框架：Vue

- Webpack

- node

- yarn

- eslint

- @vue/cli 3.2.1

- vue-cropper - 头像裁剪组件

- @antv/g2 - Alipay AntV 数据可视化图表

- Viser-vue - antv/g2 封装实现

3.组件国际化

antd UI 组件国际化

文档参见【LocaleProvider 国际化】

ant-design-vue 所有语言包可以在 这里 找到

修改 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'
  
  export default {
     
    data () {
     
      return {
     
        locale: enUS,
      }
    },
    created () {
     
   
      //获取本地缓存中的语言配置，并切换
      let language = this.$ls.get("language");
      if( language == 'zh-CN'){
      
          this.locale =  zhCN
      } else if(language == 'en-US'){
      
         this.locale = enUS
      }
    }
  }
</script>
<style>
  #app {
     
    height: 100%;
  }
</style>

4.业务文案的国际化需求

(1) 安装 vue-i18n：

$ npm install vue-i18n

(2) 创建语言js

在 src/components/lang/ 中 创建语言js 例如 en-US.js 和 zh-CN.js

在 en-US.js 和 zh-CN.js 中分别作了如下配置：

// zh-CN.js
export default {
   
  lang: '中文',
}

// en-US.js
export default {
   
  lang: 'English',
}

(3) 在main.js实例化组件

//i18n设置
import VueI18n from 'vue-i18n' 
import enLocale from '@/components/lang/en-US'
import zhLocale from '@/components/lang/zh-CN'
Vue.use