前端國際化方案總結

綜述：總結下再國際化方案實踐中遇到的問題，加深理解

1.項目背景描述

  目前項目是使用ant design + vue 來開發的，需要引入國際化方案，研究後決定使用i18n+ant design本身所帶的國際化方案來實現。

2.需要修改的代碼塊及主要內容

• 構建語言包文件

module.exports = {
    router: {
        index: 'home',
        fileManage: 'file manage',
        downloadManage: 'download  file',
        uploadManage: 'upload file'
    }
}

• 引入i18n安裝包並引入語言包

const i18n = new VueI18n({
    locale: 'CN',
    messages: {
        'CN': require('./assets/language/CN'),
        'EN': require('./assets/language/EN')
    }
})
new Vue({
    router,
    store,
    i18n,
    created: bootstrap,
    render: h => h(App)
}).$mount('#app')

• 將vue文件中涉及的文本內容，全部通過i18的方式引入

•  {
            title: this.$t('myAuthority.nos'),
            dataIndex: 'serialIndex',
            width: '60px'
   },

   

• 監聽語言的切換，並全局改變ant design 組件的語言包

   watch: {
          '$i18n.locale' (newVal, oldVal) {
              if (newVal === 'CN') {
                  this.locale = zhCN
              } else {
                  this.locale = enGB
              }
          }
      }

   

3.目前還需要考慮的問題

• 默認語言是否可以通過獲取當前地理位置信息，幫助用戶自主選擇？怎樣根據用戶地理位置獲取語言類型呢？還是做一個語言選擇下拉讓用戶來選擇？應該兩種進行一個結合？
• 如果引入數十種語言，各種語言佔用的文本空間是不同的，怎樣保證良好的可讀性？在多種ui組件中都能適應？特別是表格中列的名稱及內容？
• 切換語言時，請求的數據是否應該也要進行切換語言？這種需求的存在本身是否合理呢？對於用戶來說一次最多關注2種語言就好了？幹嘛還要翻譯請求的數據呢？