vue-i18n國際化

vue-i18n是一個針對於vue的國際化插件，使用非常簡單。

1. 下載包

npm install vue-i18n

2. 配置

// 引入插件和語言包
import VueI18n from 'vue-i18n'
import zh from '@/i18n/langs/zh'
import en from '@/i18n/langs/en'
Vue.use(VueI18n)

//實例化vue-i18n
const i18n = new VueI18n({

  // 從本地存儲中取，如果沒有默認爲中文，
  // 這樣可以解決切換語言後，沒記住選擇的語言，刷新頁面後還是默認的語言
  locale: localStorage.getItem('lang') || 'zh',
  
  messages: {
    'zh': zh, // 中文語言包
    'en': en // 英文語言包
  }
})

// 將i18n實例掛載到vue上
new Vue({
  el: '#app',
  i18n,
  router,
  store,
  template: '<App/>',
  components: { App }
})

3. 創建中、英文包文件

創建兩個文件，一個爲zh.js代表中文，en.js代表英文，具體內容格式如下

//zh.js
export default {
  nav: {
    home: '首頁',
    monitor: '監控',
    analyze: '分析',
    alarm: '報警',
    maintenance: '運維',
    config: '配置',
    device: '設備',
    scada: '畫面'
  },
  confirm: {
    ok: '確認',
    cancel: '取消',
    content: '你確認要退出系統嗎？',
    logout: '退 出'
  },
}

//en.js
export default {
  nav: {
    home: 'Home', //首頁
    monitor: 'Monitor', //監控
    analyze: 'Analyze', //分析
    alarm: 'Alarm', // 報警
    maintenance: 'Maintenance', //運維
    config: 'Config', //配置
    device: 'Device', //設備
    scada: 'Scada' //畫面
  },
  confirm: {
    ok: 'Logout', //退出
    cancel: 'Cancel', //取消
    content: 'Are you sure you want to quit the system?', //你確認要退出系統嗎
    logout: 'Logout' //
  }
}

4. 在組件中使用

我們先看vue-i18n的模板語法

//第一種
<span v-text="$t('nav.home')"></span>

//第二種
<span>{{$t('nav.home')}}</span>

5. 如何切換中英文

關於這點，vue-i18n給我們提供了一個全局變量locale，通過他我們可以查看當前使用的語言，也可以通過他改變當前使用的語言；

具體用法：

// 查看當前使用的語言
console.log(this.$i18n.locale)

// 改變當前使用的語言
this.$i18n.locale = 'en'  // 將當前使用的語言切換到英文

一般在項目中，我們會使用如下方式切換語言

// 切換語言按鈕
<v-list-tile  @click="onChangeLang">
  <v-list-tile-title>中文 / EN</v-list-tile-title>
</v-list-tile>
<v-list-tile  @click="onLogOutClick">
  <v-list-tile-title >{{$t('confirm.logout')}}</v-list-tile-title>
</v-list-tile>


// 切換方法onChangeLang的處理, 這裏的彈出框是element-ui的組件
onChangeLang() {
  this.$confirm(this.$t('changeLang.content'), this.$t('changeLang.tip'), {
    confirmButtonText: this.$t('changeLang.ok'),
    cancelButtonText: this.$t('confirm.cancel'),
    type: 'warning'
  })
    .then(() => {
      let lang = this.$i18n.locale
      if (lang === 'zh') {
        this.$i18n.locale = 'en'
        // 對應main.js配置文件中的localStorage的get方法
        localStorage.setItem('lang', this.lang)
      } else {
        this.$i18n.locale = 'zh'
        localStorage.setItem('lang', this.lang)
      }
    })
    .catch(() => {})
}

可能會遇到的問題

1. 記不住切換後的語言
   就是我們切換語言後，刷新又是默認語言，這點我們在上面已經用本地存儲localStorage解決了；

2. 將this.$t() 寫到了data屬性裏，切換語言不起作用
   data是一次性生產的，你這麼寫只能是在 data 初始化的時候拿到這些被國際化的值，並不能響應變化。
   官方的解決辦法是，建議我們將表達式寫到computed屬性裏，不要寫到data裏

3. 後臺獲取過來的動態數據，在切換國際語言後不起作用
   在witch中監聽 i18n語言變化，重新調取接口。
   

4. 注意拷貝後數組中的數據，在切換國際化時不管用，因爲淺複製只拷貝了之前沒變的數據。