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

  项目技术架构： VUE + VUEX + VUEX-i18n + UI框架

  项目要求 ： 中英俄三种语言兼容

 VUEX-i18n的使用十分方便，首先所有项目所用文字的不同语种翻译收集好并录入数据库中，

 第一步： 在项目入口是请求语言包：

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’ 就是数据库中每个文字的键值；

　第三步： 设置语言

　　　　通过 Vue.i18n.set  方法设置不同的语言 比如：CN是我的语言数据中的中文语言键值

　　　　

Vue.i18n.set( ‘CN’ );

　这样你的HTML中就会全部是 $t('****') 如：

 

转载于:https://www.cnblogs.com/sjzbk/p/7474831.html