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()，刷新頁面。