Question

国际化改造大致分两部分:
（1）antd UI组件国际化
（2）业务文案的国际化需求

一、antd UI 组件国际化

文档参见【LocaleProvider 国际化】

在项目App.vue页面增加国际化代码

<template>
  <a-locale-provider :locale="zh_CN">
    <App />
  </a-locale-provider>
</template>
<script>
import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';

moment.locale('zh-cn');
export default {
  data() {
    return {
      zh_CN,
    }
  }
}
</script>

增加国际化设置功能切换locale国际化的类型值

二、业务文案的国际化需求

(1) 安装 vue-i18n：

$ npm install vue-i18n

(2) 在 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实例化组件

注意:Vue.use(VueI18n) 要放在实例化之前，不然会报错

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

// 注册i18n实例并引入语言文件，文件格式等下解析
const i18n = new VueI18n({
  locale: Vue.ls.get("language", "zh-CN")),
  messages: {
    'zh-CN': require('@/components/lang/zh-CN.js'),
    'en-US': require('@/components/lang/en-US.js')
  }
})
//将i18n注入到vue实例中
new Vue({
  el: '#app',
  router,
  store,
  i18n,
  components: { App },
  template: '<App/>'
})

在组件中这样使用

<template>
    <div>
        \{\{ $t('lang') \}\} 
    </div>
</template>

如果想传参，例如zh-CN.js中这样配置：

welcome: "你好，{name}"

页面组件中这样使用：

<template>
    <div>
        \{\{ $tc('welcome', {'name':'jeecg' }) \}\} 
    </div>
</template>

页面输出 ： 你好，jeecg

常用方法：

$t(path, locale, option) // text 文本替换，locale可单独设置语言，option可传参数替换模板
$tc(path, choice, locale, option) // text+choice 比$t多一个choice，可以选择模板内容（模板内容间用 | 分隔，如 香蕉|苹果|梨，最多只能使用三个选项，下标从0开始，当选项为2个时下标从1开始~~）
$te(path) // text+exist 判断当前语言包中path是否存在
$d(number|Date, path, locale) // date 时间格式化
$n(number, path, locale) // number  数字格式化（货币等）

// 更多细节参考官方文档：https://kazupon.github.io/vue-i18n/api/#vue-injected-methods

如果某些js中含有字符需要切换语言（包括rules），需要写在computed中。

computed: {
    rules1 () {
      return {
        username: [
          {required: true, message: this.$t('username.required'), trigger: 'blur'}
        ]
      }
    }
  }

（3）国际化语言切换实现

handleSetLanguage(lang) {
      this.$i18n.locale = lang; //改变当前语言
      Vue.ls.set("language", lang);//将lang 语言存在localStorage里，main里面就会根据属性值进行判断 locale: Vue.ls.get("language", "zh-CN")
},