vue-i18n

下面代码将ElementUI的国际化包和自定义国际化包混合到后，创建 VueI18n实例。最后通过挂载 $loadLanguageAsync 来切换语言。

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from './lang'
Vue.use(VueI18n)
 
// 测试
import en from '@/utils/lang/langPack/en.json';
import zhCN from '@/utils/lang/langPack/zh.json';
messages.en = { ...messages.en, ...en.langData }
messages.zhCN = { ...messages.zhCN, ...zhCN.langData }
// 测试end
 
// Create VueI18n instance with options
const i18n = new VueI18n({
    locale: 'zhCN',    // 语言标识
    messages: messages,
    silentTranslationWarn: true,
})
 
// 异步加载同步语言包
function loadLanguageAsync(lang) {
    // 将语言包内字段重组，set至i18n
    i18n.setLocaleMessage(lang, { ...messages[lang], ...zhLocal[lang] })
    i18n.locale = lang
    return lang
}
 
// 在手动切换语言时调用此方法，页面初始化时需加载一个默认语言
Vue.prototype.$loadLanguageAsync = loadLanguageAsync
 
export default i18n