src/locales/lang/index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import axios from 'axios'
import { Message } from 'element-ui'
Vue.use(VueI18n)
/**
* 请求后台接口获取语言包
* @param type
* @returns {AxiosPromise}
*/
function getLang(type) {
return axios({
headers:{
'Accept-Language':type
},
method: 'get',
url: `${process.env.VUE_APP_BASE_API}/Base/Language/GetLangResource?lang=${type}`
})
}
let i18n = new VueI18n({
silentTranslationWarn: true,
locale: 'zh-CN',
messages:{}
})
// 异步请求语言包并且赋值到i18n中
async function loadLanguageAsync(lang) {
let res = await getLang(lang)
if(!res.data.Success) {
Message({type:'error',message:res.data.Msg})
return
}
i18n.setLocaleMessage(lang, res.data.Data)
i18n.locale = lang
}
// 挂载在VUE原型链上
Vue.prototype.$loadLanguageAsync = loadLanguageAsync
export default i18n
//App.vue文件，页面初始化时
created() {
// 请求语言为中文
this.$loadLanguageAsync('zh-CN')
},
// select下拉切换语言
changeLang(lang) {
this.$loadLanguageAsync(lang)
}
