国际化改造方案 · JeecgBoot 开发文档

国际化改造方案 === ``` 国际化改造大致分两部分: （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") }, ```