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

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