国际化改造方案
最后更新于：2022-04-02 07:13:22
国际化改造方案
===
```
国际化改造大致分两部分:
（1）antd UI组件国际化
（2）业务文案的国际化需求
```
### 一、antd UI 组件国际化
文档参见【[LocaleProvider 国际化](https://vue.ant.design/components/locale-provider-cn/)】
在项目App.vue页面增加国际化代码
```
```
增加国际化设置功能切换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: '
';
{{ $t('lang') }}
```
#### 如果想传参，例如zh-CN.js中这样配置：
```
welcome: "你好，{name}"
```
页面组件中这样使用：
```
{{ $tc('welcome', {'name':'jeecg' }) }}
```
页面输出 ： 你好，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")
},
```