Dynamic loading a language object instead of load all in the begin when i have 10 language.

now ，my code is like that：

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import en from 'module/user/i18n/en';
import zh from 'module/user/i18n/zh';

Vue.use(VueI18n);

const messages = {
  en: en,
  zh: zh,
  ...
};
let lang = window.localStorage.getItem('lang') || 'en';

export default new VueI18n({
  locale: lang,
  messages
});

but and i want to dynamic loading a language objec like this:

import Vue from 'vue';
import VueI18n from 'vue-i18n';
//  import en from 'module/user/i18n/en';
// import zh from 'module/user/i18n/zh';

Vue.use(VueI18n);

const messages = {
  en:  () => import('module/user/i18n/en');  // i want to  dynamic loading,but it does not work!!!
  zh:  () => import('module/user/i18n/zh');  
};
...

[kuanhsuh]

Hi guys, I figure it out.

Here’s the code in my vuex.

async setLangNew({commit}, payload){
    if (payload in app.$i18n.messages) {
      commit(types.SET_LANG, payload)
    } else {
      try {
        // const res = await axios.get(`./src/lang/${payload}.json`)
        // const res = await axios.get(`../../src/lang/${payload}.json`)
        const res = await import(`./src/lang/locale/${payload}.json`)
        app.$i18n.setLocaleMessage(payload, res.data)
        commit(types.SET_LANG, payload)
      }
      catch(e) {
        console.log(e)
      }
    }
  }

if you want the full demo, you can check out my repo, vue-i18n sandbox

[smares]

Loading all possible languages if your user only uses English for example is not sensible. Not only does it increase the bundle size, but the localizations for several languages also have to be kept in memory.