在vue中使用vue-i18n按需加載語言包

1.新建目錄結構以下：

.
├── App.vue
├── assets
│   └── langs
│       ├── en
│       │    └── index.js
│       ├── zh
│       │    └── index.js
│       └── index.js
├── components
│   └── HelloWorld.vue
├── main.js
└── store.js

2.assets/langs/index.js內容以下：

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import axios from 'axios'

Vue.use(VueI18n)

export const i18n = new VueI18n({
//   locale: 'zh', // 設置語言環境
  messages:{
    //   'zh':messages
  } // 設置語言環境信息
})

const loadedLanguages = [] // 咱們的預裝默認語言

function setI18nLanguage (lang) {
  i18n.locale = lang
  axios.defaults.headers.common['Accept-Language'] = lang
  document.querySelector('html').setAttribute('lang', lang)
  return lang
}

export function loadLanguageAsync (lang) {
  if (i18n.locale !== lang) {
    if (!loadedLanguages.includes(lang)) {
      return import(/* webpackChunkName: "lang-[request]" */ `@/assets/langs/${lang}/index.js`).then(msgs => {
        i18n.setLocaleMessage(lang, msgs.default)
        loadedLanguages.push(lang)
        return setI18nLanguage(lang)
      })
    }
    return Promise.resolve(setI18nLanguage(lang))
  }
  return Promise.resolve(lang)
}

3.在main.js中使用

//main.js

import Vue from 'vue'
import App from './App'
import store from './store'
import { i18n } from './assets/langs'
Vue.config.productionTip = false

window.app = new Vue({
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

4.loadLanguageAsync是實際用於更改語言的函數。好比在路由鉤子中獲取到當前語言環境加載對應語言包

beforeEnter(to, from, next){
      let lang = localStorage.getItem(lang)||'zh';
      lang=to.query.lang||lang;
      localStorage.setItem('lang',lang)
      loadLanguageAsync(lang).then(() => next());
    }

參考vueI18n地址以下：https://kazupon.github.io/vue...