vue项目国际化vue-i18n的安装使用教程
前言
项目需要支持多语言,我们需要提取出项目中使用的静态文本,使用语言包进行管理,当切换语言设置的时候,可以自动切换整个项目的文字显示。
发现Vue项目中有对应的组件vue-i18n,而且对项目的代码修改不大,于是就使用了这个组件去修改项目中的代码。下面话不多说了,来一起看看详细的介绍吧。
安装
//script引入//npm安装 npminstallvue-i18n //yarn安装 yarnaddvue-i18n
一般一个项目中使用都是通过安装包的方式去运行的,script引入的较少。
使用
项目中配置i18n
importVueI18nfrom'vue-i18n' Vue.use(VueI18n) consti18n=newVueI18n({ local:'cn',//设置语言 messages//语言包 }) newVue({ el:'#app', ... i18n }) //messages大概的使用格式 { cn:{ name:'名字' }, us:{ name:'Name' } }
使用i18n
//html需要使用{{}}将name包装起来 {{$t('name')}} //js $t('name')
还有一些其他的用法,如:
- 针对不同语言,显示不同的格式
- 如果在传入自定义变量来控制显示
- ...具体的请参考官方文档。
切换语言的话,可以使用内置变量:
//通过设置locale来切换语言 this.$i18n.locale=cn|us
语言包的生成&替换项目中原有的静态文本
这一步最关键,抽离出所有出现的汉字,替换成$t('xxx'),维护多个版本的语言文件
语言包这边是这么处理的,项目下新增一个目录languages
--languages --lib --cn.js//中文语言包 --us.js//英文语言包 --..//其他语言,暂未实践 --index.js//导出语言包
cn.js
exportdefault{ common:{ message:'消息' }, xxx:{ } }
us.js
exportdefault{ common:{ message:'Messages' }, xxx:{ } }
index.js
importcnfrom'./lib/cn.js' exportdefault{ cn, us }
替换文本
...{{$t('message')}}...
问题
- 不同的语言,格式不同,长度不同,可能需要调整项目的样式,以保正常
- 对于一个已经在使用的项目,生成语言包这一步工作量大,浪费时间
- 没有考虑如果是否需要动态的加载语言包,而非初始的加载所有的语言包
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对毛票票的支持。