|
需求：需要调取接口获取语言数据，并加载i18n语言包
之前国际化的语言信息是直接在前端直接事先配置好的，但是每次客户有新加字段或者需要修改的文字语言 都需要前端再去一个一个改，不利于维护。 所以就换了一种解决办法：从后端获取数据，同时将获取的数据加载到前端实现国际化的功能
1.项目需求是：点击右上角的语言设置切换语言时，调取接口，获取数据更新语言包  代码：
{item.label
}} -->
{{ $t(item.label) }}
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之前设置过了值，记得要在这边也要把之前的值补进去。
|