vue國際化 一

背景

項目背景

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

參考：https://segmentfault.com/a/1190000020297356