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

巴特西