国际化改造方案 === ``` 国际化改造大致分两部分: (1)antd UI组件国际化 (2)业务文案的国际化需求 ``` ### 一、antd UI 组件国际化 文档参见【[LocaleProvider 国际化](https://vue.ant.design/components/locale-provider-cn/)】 在项目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") }, ```