综述:总结下再国际化方案实践中遇到的问题,加深理解
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种语言就好了?干嘛还要翻译请求的数据呢?