当前位置: 首页 > Web前端 > vue.js

shopro商城使用vue-i18n国际化

时间:2023-03-31 19:23:31 vue.js

这两天手头的任务是给一个商城项目添加多国语言。这个商城庞大复杂,用uniapp+uviewui实现。为商城项目添加多语言,难免要做大量的文字替换工作。如此复杂的项目如何高效实现多语言国际化是本文要写的主要内容。介绍vue-i18nvue-i18n是一个vue插件,主要功能是让项目支持国际多语言,首先我们在项目中介绍这个插件:cnpmvue-i18nyarninstallmain.jsimportVueI18nfrom'vue-i18n'添加lang语言文件夹新建zh-cn.json和ug.json封装i18n供我们使用Newcreatedlang/index.jsimportVuefrom'vue'importVueI18nfrom'vue-i18n'Vue.use(VueI18n);consti18n=newVueI18n({locale:'zh',messages:{'zh':require('@/lang/zh-cn.json'),'en':require('@/lang/ug.json'),}});if(uni.getStorageSync('locale')){i18n.locale=uni.getStorageSync('locale')}else{i18n.locale='zh-cn'}Vue.prototype._i18n=i18n;在exportdefaulti18nvue中使用mounted(){if(uni.getStorageSync('locale')){this.$i18n.locale=uni.getStorageSync('locale')}else{this.$i18n.locale='zh-cn'}this.langobj=这个。$t('货物');},**importi18nfrom'../../lang/index'**exportdefault{//手机号码mobile:[{required:true,message:i18n.t('shopro.qingshurushoujihao'),trigger:['change','blur']},{验证器:(规则,值,回调)=>{returntest.mobile(value);},message:**i18n.t('shopro.shoujihaomageshibuzhengque'),**trigger:['change','blur']}],多语言切换js