5

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

 1 year ago
source link: https://www.cnblogs.com/zhoulujun/p/17231396.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

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

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

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

a.jpg

好几屏幕全部是，虽然从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


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK