vue2升级vue3：vue-i18n国际化异步按需加载

vue2异步加载之前说过，vue3还是之前的方法，只是把 i18n.setLocaleMessage改为i18n.global.setLocaleMessage

但是本文还是详细说一遍：

为什么需要异步加载语言包

主要还是缩小提代码包，没有按需加载前，语言包内容太多

好几屏幕全部是，虽然从webpack-analysis 看图里面占比可以忽略不计

按语言异步加载语言包

一次加载所有翻译文件是过度和不必要的。

因为可能一直用中文，那么就不会用到英文的数据,就没必要去加载。只在请求的时候去加载它

改动前代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

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多，堆叠起来体积也不少

改动后

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

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