项目技术架构: VUE + VUEX + VUEX-i18n + UI框架ios
项目要求 : 中英俄三种语言兼容数据库
VUEX-i18n的使用十分方便,首先全部项目所用文字的不一样语种翻译收集好并录入数据库中,axios
第一步: 在项目入口是请求语言包:api
axios({ method: 'post', url: '/app/api/getLanguage', }).then(function (resp){ if(resp.data.result){ // 赋值给i18n for (let i in resp.data.data) { Vue.i18n.add(i, resp.data.data[i]) } var lang = _this.$store.state.LANG || 'CN'; Vue.i18n.set(lang); _this.$store.commit('UPDATELANG', {LANG: lang}); } }) .catch();
第二步: 把请求的数据经过 Vue.i18n.add 方法添加, 获取的时候经过 $t() 方法 好比: $t('vux.app_05') ‘vux.app_05’ 就是数据库中每一个文字的键值;架构
第三步: 设置语言app
经过 Vue.i18n.set 方法设置不一样的语言 好比:CN是个人语言数据中的中文语言键值框架
Vue.i18n.set( ‘CN’ );
这样你的HTML中就会所有是 $t('****') 如:post