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