1.新的目录结构如下：.├──App.vue├──assets│└──langs│├──en││└──index.js│├──zh││└──index.js│└──index.js├──components│└──HelloWorld.vue├──main.js└──store.js2.assets/langs/index.js内容如下：importVuefrom'vue'importVueI18nfrom'vue-i18n'importaxiosfrom'axios'Vue.use(VueI18n)exportconsti18n=newVueI18n({//locale:'zh',//setlocalemessages:{//'zh':messages}//设置locale信息})constloadedLanguages=[]//我们预装的默认语言函数setI18nLanguage(lang){i18n.locale=langaxios.defaults.headers.common['Accept-Language']=langdocument.querySelector('html').setAttribute('lang',lang)returnlang}exportfunctionloadLanguageAsync(lang){if(i18n.locale!==lang){if(!loadedLanguages.includes(lang))}{returnimport(/*webpackChunkName:"lang-[request]"*/`@/assets/langs/${lang}/index.js`).then(msgs=>{i18n.setLocaleMessage(lang,msgs.default)loadedLanguages.push(lang)returnsetI18nLanguage(lang)})}returnPromise.resolve(setI18nLanguage(lang))}returnPromise.resolve(lang)}3.在main.jsApp中使用//main.jsimportVuefrom'vue'import来自'./App'从'./store'导入{i18n}来自'./assets/langs'Vue.config.productionTip=falsewindow.app=newVue({store,i18n,render:h=>h(App)}).$mount('#app')4.loadLanguageAsync是真正改变语言的函数。比如在routinghook中获取当前locale并加载对应的语言包beforeEnter(to,from,next){letlang=localStorage.getItem(lang)||'zh';lang=to.query.lang||lang;localStorage.setItem('lang',lang)loadLanguageAsync(lang).then(()=>next());}参考vueI18n地址如下：https://kazupon.github.io/vue...
