前端国际化方案总结

综述：总结下再国际化方案实践中遇到的问题，加深理解

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种语言就好了？干嘛还要翻译请求的数据呢？