vue + antd 实现国际化

Vue 中的国际化
一、安装
（1）安装vue-i18n // npm install vue-i18n --save
二、新建国际化文件
（1）在assets下新建需要国际化的语言文件
eg：

对应的语言包，采用key，value的形式
en-US写入对应的英文，zh-CN写入对应的中文包 ps：在中英文文件中对应key值应相同，value值为相应的语言值
三、引用文件
//在main.js 中引用语言包
import VueI18n from 'vue-i18n'
// 使用vue-i18n插件
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'zh-CN', // 语言表示，通过切换local来切换本地语言
message:{

'en-US': require( './assets/lang/en-US' );   // 中文语言包
'zh-CN': require( './assets/lang/zh-CN' );   // 英文语言包
}

})

new Vue({

el:'#app',
i18n,
components,
template: '<App/>'

})
四、使用
在xxx.vue文件中，使用LocaleProvider在文件的外围包裹一次即可全局生效
eg:
<template>

<a-locale-provider :loacle="locale">
<div>XXXX</div>
<button @click="changeLocale('en-us')" v-show="localeval=='zh-cn'">English</button >
<button @click="changeLocale('zh-cn')" v-show="localeval=='en-us'">中文</button >

</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');
const EN = 'en-us';
const ZH = 'zh-cn';
export default {
    name: 'App',
    data(){
        return{
            locale:zh_CN,
            localeval: 'zh-cn'
        }
    }
}

</script>
五、具体使用
（1）在HTML中

<div> {{ $t('key.value') }} <div>
<input :label="$t('key.value')" :placeholder="$t('key.value')" />

（`2）在script中
console.log( this.$t('key.value') );`
（3）在vue实例外的js代码中的文本替换
方法一：只需在文件中导入i18n导入即可
方法二：将i18n挂到window下，变成全局变量，就不需要每个文件都导入i18n
eg： // main.js中 window.i18n = i18n
（4）在js文件中的使用
eg:
1.在xxx.js 中，有如下规则的定义：
2.HTML中校验规则定义

在js文件中，定义$t会报错，导入i18n也会有报错。
第一步：全局挂载i18n
第二步：在js文件中导入：import moment from 'monent'
第三步：在需要国际化的字段中写入 message: i18n.t(‘key.value’)
ps 也可以写一个公共方法对文本信息字段国际化
eg ：在公共文件中引入 import moment from 'moment'
/**
*公共方法国际化message,只针对以上贴图信息,可自行处理
*/
export function getMessage( rule ){

for( let i in rule ){  // 遍历rule
    if( rule[i].length > 1 ){      // 会有多条需要校验的信息，此处只遍历拿到有校验信息的数据
        for( let j = 0, l = rule[i][1].rules.length; i<l; i++ ){
            rule[i][1].rules[j].message = i18n.t(rule[i][1].rules[j].message)   // 起作用的代码为 i18n.t
        }
    }
}

}
六、存在问题
（1）问题1. 将国际化的数据挂载在data中，在切换中英文时不起作用。官方给的解决方法是将数据写在computed中。原因是：因为data是一次性产生的
（2）问题2. antdUI组件本身就具有国际化，但是实际开发中，页面加载后，UI组件的国际化就会初始为中文。此时需要给本地设置相应的语言即可。即：moment.local('xxx').
ps 相关问题还可参考https://www.cnblogs.com/listen9436/p/10525532.html