vue国际化 一
背景
项目背景
项目基于Vue+Typescript+iview，有国际化的需求，目前支持中文和英文两种语言。
本身国际化没有什么难度，但是typescript和iview还是有点需要注意的，特此记录。
vue-i18n
Vue I18n 是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。
基本的使用方法就不多介绍了，参考下列文档。后面介绍一些遇到的问题及解决办法。
参考文档：
用法
1. HTML代码中使用
<span>{{$t('m.common.name')}}</span>调用$t方法，参数传key值。至于m.common.name的key从何而来，我们看一下i18n传入的的messages值。
先看main.js里，message传入两种语言的字符串对象。
const messages = {
'zh-CN': require('../../static/locale/cn.js'),
'en-US': require('../../static/locale/en.js')
}
const i18n = new VueI18n({
locale: lang,
messages
})其中zh-CN的值：
m = {
common: {
name: '名称'
}
}en-US的值：
m = {
common: {
name: 'Name'
}
}到这里，明白了m.common.name的key怎么来的了吧！
2. JS代码中使用
js代码中的使用方法是调用$i18n.t方法
data () {
return {
btnName: this.$i18n.t('m.common.create')
}
}需要注意的是，与html中不同，当i18n的locale切换时，html中用到的字符串会重新渲染，完成语言的切换，而js代码中的字符串无法实现。
网上有一个方案是将字符串获取放在computed中，或者是watch监听locale的变化，完成翻译的转换。
我这里，采用的是切换locale时，先将locale存在cookie中，然后刷新页面，完成国际化。
// 页面刷新
location.reload();虽然这种办法存在问题（无法保持当前页面的状态），但是却能解决iview组件的国际化。
3. TS代码中的使用
在ts代码中使用i18n的话，会报错："TypeError: Cannot read property 't' of undefined"
所以需要将用到i18n的放在@Component中，如下：
@Component({
data () {
return {
btnName: this.$i18n.t('m.common.create')
}
}
})
export default class ResourcePoolPage extends Vue {
}但是如果data中不是单纯的属性，而是复杂的对象，甚至会引用到methods中的方法时，你甚至需要把data和methods都挪至@Component里，那么就失去ts的优势了。下面的方法可以解决这个问题：
-
首先
main.ts里，改写，将Vue对象存在window。window['vm'] = new Vue({ router, i18n, render: (h) => h(App), store: VuexStore }).$mount('#app') -
在ts中需要用到时
export default class ResourcePoolPage extends Vue { btnName2: string = window['vm'].$i18n.t('m.common.create') }
如果嫌麻烦，可以封装一个翻译的方法，在ts里调用即可。
4. iview的国际化
iview的国际化分为iview自身的国际化，以及iview接收到数据的国际化（如Table中的columns的国际化）。
4.1 iview自身国际化
在main.ts里完成：
import iview from 'iview'
import localeCN from 'iview/locale/zh-CN'
import localeEn from 'iview/locale/en-US'
const lang = VuexStore.getters.getLang // 获取当前的lang
const locale = (lang === 'zh-CN') ? localeCN : localeEn
Vue.use(iview, { locale })4.2 数据的国际化
数据的国际化没有特别的操作，依照前面的js和ts方法，只需要一个页面刷新操作即可。具体流程如下：
main.ts初始会读cookie里的值，获取lang的设置，没有的话默认是中文。- lang修改后，保存cookie，然后
location.reload()，刷新页面。
