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)
}