使用 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('****') 如：