Vue+Typescript项目国际化实践

brownbird 发布于1月前
0 条问题

背景

项目背景

项目基于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.namekey怎么来的了吧!

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(),刷新页面。

查看原文: Vue+Typescript项目国际化实践

  • silverlion
  • blueduck
  • yellowsnake
  • smallfrog
  • bigpeacock
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。