使用 VUEX-i18n 开发国际化网站

  项目技术架构: 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

相关文章
相关标签/搜索