Vue+Typescript项目国际化实践

背景

项目背景

项目基于Vue+Typescript+iview，有国际化的需求，目前支持中文和英文两种语言。
本身国际化没有什么难度，但是typescript和iview还是有点需要注意的，特此记录。

vue-i18n

Vue I18n 是 Vue.js 的国际化插件。它可以轻松地将一些本地化功能集成到你的 Vue.js 应用程序中。

基本的使用方法就不多介绍了，参考下列文档。后面介绍一些遇到的问题及解决办法。

参考文档：

• vue-i18n官方文档
• 使用教程：《前端框架Vue.js——vue-i18n ，vue项目中如何实现国际化》

用法

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的优势了。下面的方法可以解决这个问题：

1. 首先main.ts里，改写，将Vue对象存在window。

   window['vm'] = new Vue({
     router,
     i18n,
     render: (h) => h(App),
     store: VuexStore
   }).$mount('#app')

2. 在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方法，只需要一个页面刷新操作即可。具体流程如下：

1. main.ts初始会读cookie里的值，获取lang的设置，没有的话默认是中文。
2. lang修改后，保存cookie，然后location.reload()，刷新页面。