vi18n按需加载

//i18n->index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

export const i18n = new VueI18n({
  locale: 'vus', // 将要切换的语言,根据场景动态获取
  fallbackLocale: 'vus',
  messages: {
    "vus": require('../assets/languages/vus.json'),
  }
});
const loadedLanguages = ['vus'] // 我们的预装默认语言

function setI18nLanguage (lang) {
  i18n.locale = lang
  return lang
}

export function loadLanguageAsync (lang) {
  // 如果语言相同
  if (i18n.locale === lang) {
    return Promise.resolve(setI18nLanguage(lang))
  }

  // 如果语言已经加载
  if (loadedLanguages.includes(lang)) {
    return Promise.resolve(setI18nLanguage(lang))
  }

  // 如果尚未加载语言
  return import(/* webpackChunkName: "lang-[request]" */ `../assets/languages/${lang}.json`).then(
    messages => {
      i18n.setLocaleMessage(lang, messages.default)
      loadedLanguages.push(lang)
      return setI18nLanguage(lang)
    }
  )
}
//main.js
import { i18n, loadLanguageAsync } from './i18n'
router.beforeEach((to, from, next) => {
  const lang =lanKey.includes(to.query.language) ? to.query.language : 'vus';
  loadLanguageAsync(lang).then(() => {
    document.title = i18n.t(to.meta._title)
    next()
  })
});
new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')
设置语言:
this.$i18n.locale="zh"

 

参考:https://kazupon.github.io/vue-i18n/zh/guide/lazy-loading.html

posted @ 2022-03-03 14:21  chicidol  阅读(227)  评论(0编辑  收藏  举报