vue 动态从接口获取数据更新i18n语言包

需求：需要调取接口获取语言数据，并加载i18n语言包

之前国际化的语言信息是直接在前端直接事先配置好的，但是每次客户有新加字段或者需要修改的文字语言 都需要前端再去一个一个改，不利于维护。
所以就换了一种解决办法：从后端获取数据，同时将获取的数据加载到前端实现国际化的功能

1.项目需求是：点击右上角的语言设置切换语言时，调取接口，获取数据更新语言包

代码：

<template>
  <el-dropdown trigger="click" @command="handleSetSize">
    <div>
      <svg-icon class-name="size-icon" icon-class="size" />
    </div>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item
        v-for="item of sizeOptions"
        :key="item.value"
        :command="item.value"
      >
        <!-- {{item.label
          }} -->
        {{ $t(item.label) }}
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

methods方法：

    handleSetSize(lang) {
      // console.log(lang, "uyuyin");
      this.$i18n.locale = lang;
      localStorage.setItem("lang", lang);
      this.getRe(lang);

      this.$message({
        message: "语言设置成功",
        type: "success",
      });
    },

  getResouce(data).then((res) => {
        // 刷新页面
        res &&
          res.map((item) => {
            if (item.lanCode) {
              item.lanCode = item.lanCode.replace("-", "_");
            }
            if (item.lanCode === localStorage.getItem("lang")) {
              var clientData = this.serverDataToClientData(res);
              localStorage.setItem("clientData", JSON.stringify(clientData));
              // console.log(JSON.stringify(clientData), "clientData");
              this.$router.go(0);
            }
          });
      });

注意：因为我这边后端返回的数据格式和语言包所需要的格式不一致，所以在拿到数据时调用自己写的一个方法**this.serverDataToClientData（）**先进行数据格式重组后再使用
后端返回数据格式：

this.serverDataToClientData（）方法 &&mergeToJson（）

serverDataToClientData(serverDataStr) {
      var serverData = serverDataStr;
      var clientData = {};
      for (var i in serverData) {
        // var lanCode = serverData[i].lanCode;
        // clientData[lanCode] = {};
        clientData = {};
        var lanData = serverData[i].resourceMap;
        for (var key in lanData) {
          //遍历json对象的每个key/value对,p为key
          var keyArr = key.split(".");
          var lanMsg = lanData[key];
          var itemObj = {};
          for (var j = keyArr.length - 1; j >= 0; j--) {
            var itemKey = keyArr[j];
            var obj = {};
            if (j == keyArr.length - 1) {
              obj[itemKey] = lanMsg;
            } else {
              obj[itemKey] = itemObj;
            }
            itemObj = obj;
          }
          // this.mergeToJson(itemObj, clientData[lanCode]);
          this.mergeToJson(itemObj, clientData);
        }
      }
      return clientData;
    },
     mergeToJson(source, target) {
      for (var key in source) {
        if (target[key]) {
          return this.mergeToJson(source[key], target[key]);
        } else {
          target[key] = source[key];
        }
      }
      return target;
    },

转换后格式：

关键：最后在main.js 中进行引用

const i18n = new VueI18n({
  locale: localStorage.getItem('lang') || 'zh_CN',
  // messages: {
  //   zh_CN: require('./assets/i18n/zh_CN'),
  //   en_US: localStorage.getItem('clientData'),
  //   ja_JP: require('./assets/i18n/ja_JP'),
  //   zh_TW: require('./assets/i18n/zh_TW')
  // }
})

var lanData = localStorage.getItem('clientData')
i18n.setLocaleMessage(localStorage.getItem('lang'), JSON.parse(lanData));

另外一种方法：如果没有要求也可以直接在main.js中调取接口，获取数据直接更新

Axios.get('http://127.0.0.1:8080/internationalize/initInternationalize',{})
  .then(response => {
    i18n.setLocaleMessage('zh-CN',Object.assign(response.data));
  });

核心关键点就是最后的通过Axios来加载数据然后加载到我们的i18n中，这段就是实现热加载我们的国际化信息的数据的方式，这边如果你的zh-CN之前设置过了值，记得要在这边也要把之前的值补进去。