vue2异步加载之前说过，vue3还是之前的方法，只是把 i18n.setLocaleMessage改为i18n.global.setLocaleMessage
但是本文还是详细说一遍：
为什么需要异步加载语言包
主要还是缩小提代码包，没有按需加载前，语言包内容太多
好几屏幕全部是，虽然从webpack-analysis 看图里面占比可以忽略不计
按语言异步加载语言包
一次加载所有翻译文件是过度和不必要的。
因为可能一直用中文，那么就不会用到英文的数据,就没必要去加载。只在请求的时候去加载它
改动前代码
import { createI18n } from 'vue-i18n';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import cookies from '@/utils/cookies';
import chineseJson from '../lang/zh-cn.json';
import englishJson from '../lang/en.json';
//****n
const currentLang = cookies.get('blueking_language') || 'zh-cn';
if (currentLang === 'en') {
dayjs.locale('en');
} else {
dayjs.locale('zh-cn');
}
const i18n = createI18n({
locale: currentLang,
fallbackLocale: 'zh-cn', // 设置备用语言
silentFallbackWarn: true,
silentTranslationWarn: true,
globalInjection: true,
allowComposition: true,
messages: {
en: { ...englishJson },
'zh-cn': { ...chineseJson },
//****n
},
});
export default i18n;
这个文件n多，堆叠起来体积也不少
改动后
import { createI18n } from 'vue-i18n';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import cookies from '@/utils/cookies';
// import chineseJson from '../lang/zh-cn.json';
// import englishJson from '../lang/en.json';
export type LangType = 'zh-cn'|'en';
const currentLang: LangType = cookies.get('blueking_language') as LangType || 'zh-cn';
// 初始化加载fallbackLocale 语言包，但是图表平台首先加载框架，无需放到框架里面去加载
/* const messages = {
// en: { ...englishJson },
'zh-cn': { ...chineseJson },
};*/
const i18n = createI18n({
locale: currentLang,
fallbackLocale: 'zh-cn', // 设置备用语言
silentFallbackWarn: true,
silentTranslationWarn: true,
globalInjection: true,
allowComposition: true,
// messages,
});
export function changLang(langs: LangType) {
if (currentLang === 'en') {
dayjs.locale('en');
} else {
dayjs.locale('zh-cn');
}
cookies.set('blueking_language', langs);
loadLanguageAsync(langs);
// window.location.reload();
}
export function setI18nLanguage(lang: LangType) {
i18n.global.locale = lang;
return lang;
}
export function loadLanguageAsync(lang: LangType) {
return import(/* webpackChunkName: "lang-request" */`../lang/${lang}.json`).then((langfile) => { // 动态加载对应的语言包
i18n.global.setLocaleMessage(lang, langfile);
return setI18nLanguage(lang); // 返回并且设置
});
}
changLang(currentLang);
export default i18n;
这样就可以了
注意事项
-
由于是异步加载，比如初始化只加载 fallbackLocale ，代码中注释的部分
-
vue3使用vue-i18n 9.x ,相关方法在i18n.global.xxx
但是这个加载包还是有些打，需要进一步拆分
按模块或路由加载语言包
这个优化有很多措施
拆分模块
之前的语言包全部是在一个json文件里面。第一个，json无法tree-shake 树摇 掉不用代码。
如果是ts，首先第一个按页面、功能 分成一个个 对象。虽然不用tree-shake。
但是可以通过组合得到不同的js。
然后在路由钩子里面，按需注入。loadLanguageAsync
参考文章：
vueI18n 多语言文件按需加载：https://blog.csdn.net/yujin0213/article/details/119137798
vue 多语言 vue-i18n 按需加载，异步调用 https://www.cnblogs.com/chenyi4/p/12409074.html
十分钟入门前端最佳的语言国际化方案 https://zhuanlan.zhihu.com/p/144717545
转载本站文章《vue2升级vue3：vue-i18n国际化异步按需加载》,
请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/vue3/8930.html