From 9297f252e7cce8a02f52e4336a06b0c884259868 Mon Sep 17 00:00:00 2001 From: awen <71752352@qq.com> Date: Sun, 21 Jan 2024 21:18:25 +0800 Subject: [PATCH] i18n rebuild, elementui,vuetify rebuild i18n --- packages/elementui/index.js | 21 +++----- packages/elementui/package.json | 5 +- packages/elementui/readme.md | 2 +- packages/i18n/config.js | 3 -- packages/i18n/index.js | 90 ++++++++++++++++++++++----------- packages/i18n/readme.md | 23 ++++++++- packages/vuetify/config.js | 1 - packages/vuetify/index.js | 43 +++++----------- packages/vuetify/package.json | 7 +-- packages/vuetify/readme.md | 4 +- 10 files changed, 111 insertions(+), 88 deletions(-) delete mode 100644 packages/i18n/config.js diff --git a/packages/elementui/index.js b/packages/elementui/index.js index 9a6449e..1e4f55c 100644 --- a/packages/elementui/index.js +++ b/packages/elementui/index.js @@ -13,18 +13,16 @@ * } */ import localElement from 'element-ui/lib/locale' -<%option = option ||{}%> +const importers = { +<%if(option.langs){%> <%for(let lang in option.langs){%> -import <%=lang%>_lang from 'element-ui/lib/locale/lang/<%=option.langs[lang]%>' + <%=lang%>:()=>import("element-ui/lib/locale/lang/<%=option.langs[lang]%>.js"), <%}%> -const langs = {} -<%for(let lang in option.langs){%> -langs.<%=lang%> = <%=lang%>_lang <%}%> -// const test = import('element-ui/lib/locale/lang/zh-CN.js') -// console.log(test) - +} export default function(option,Context){ + Context.I18n.setLocaleMessages(importers) + Context.hook("APP:INIT",function(options) { Object.assign(options,{ mixin:{ @@ -32,17 +30,10 @@ export default function(option,Context){ if(this.$i18n){ // 💡 第一种方法是借助vuei8n来实现 localElement.i18n((key, value) => this.$i18n.t(key, value)) - this.$i18n.mergeLocaleMessage(this.$i18n.locale,langs[this.$i18n.locale]) // 💡 第二种方法自己设置语言包,但是前端切换语言的时候elementui重绘前会有延迟 // localElement.use(langs[this.$i18n.locale]) } }, - watch:{ - '$i18n.locale'(newLocal) { - this.$i18n.mergeLocaleMessage(newLocal,langs[newLocal]) - // localElement.use(langs[newLocal]) - } - } } }) }) diff --git a/packages/elementui/package.json b/packages/elementui/package.json index 4efb55b..0eab041 100644 --- a/packages/elementui/package.json +++ b/packages/elementui/package.json @@ -1,6 +1,6 @@ { "name": "@vitescv/elementui", - "version": "2.0.0", + "version": "2.0.1", "type": "module", "main": "index.js", "description": "element-ui module for vitescv & vue2.7", @@ -12,6 +12,7 @@ "./components": "./elementuiesm.js" }, "peerDependencies": { - "vitescv":"^2.0.0" + "vitescv":"^2.0.0", + "@vitescv/i18n":"^2.0.0" } } \ No newline at end of file diff --git a/packages/elementui/readme.md b/packages/elementui/readme.md index a6076f4..c895475 100644 --- a/packages/elementui/readme.md +++ b/packages/elementui/readme.md @@ -16,7 +16,7 @@ pnpm add @vitescv/elementui modules:{ ... "@vitescv/elementui":{ - // 与i18n的语言包映射关系 + // 与@vitecv/i18n的语言包映射关系 "langs":{ 'en':'en', 'zh':'zh-CN', diff --git a/packages/i18n/config.js b/packages/i18n/config.js deleted file mode 100644 index 0b502bc..0000000 --- a/packages/i18n/config.js +++ /dev/null @@ -1,3 +0,0 @@ -export default { - manualChunks:{'vi18n': ['vue-i18n','@vitescv/i18n']}, -} \ No newline at end of file diff --git a/packages/i18n/index.js b/packages/i18n/index.js index 0543710..b28ac02 100644 --- a/packages/i18n/index.js +++ b/packages/i18n/index.js @@ -10,48 +10,47 @@ import VueI18n from 'vue-i18n' <%const dir = option.dir||'i18n'%> const langsImporter = import.meta.glob("@/<%=(option.dir)||'i18n'%>/*.json") -console.log(langsImporter) +// console.log(langsImporter) // i18n操作类 class LocaleOperator{ - constructor(options,Contenxt){ + constructor(options){ this.dymicImporters = {} for(var k in langsImporter){ const regs = k.match(/\W([a-zA-Z]+\w+)\.json$/i) if(regs&®s.length>1){ const lang = regs[1] + // if(!options.messages[lang]){ + // options.messages[lang] = {} + // } this.dymicImporters[lang] = [langsImporter[k]] - if(!options.messages[lang]){ - options.messages[lang] = {} - } } } this.langs = Object.keys(this.dymicImporters) this.langsLoaded = [] - this.langsModules - if(this.langs>0 && this.options.locale){ - this.setLocale - } this.i18n = new VueI18n(options) - this.Contenxt = Contenxt this.localeKey = '__locale' } // 获取当前语言 getLocale(){ + if(window&&window.localStorage){ + return localStorage.getItem(this.localeKey) + } return this.i18n.locale } // 设置当前语言 setLocale(lang){ - // if(window){ - // localStorage.setItem(this.localeKey,lang) - // document.querySelector('html').setAttribute('lang', lang) - // } - this.i18n.locale = lang - return lang + if(window&&window.localStorage){ + localStorage.setItem(this.localeKey,lang) + document.querySelector('html').setAttribute('lang', lang) + } + this.i18n.locale = lang + // console.log(lang,this.i18n.getLocaleMessage(lang)) + return lang } // 加载语言包 loadLocaleMessage(lang){ // 不包含语言包 - if(!this.langs.includes(lang)){ + if(!lang || !this.langs.includes(lang)){ console.error('[@vitescv/i18n] '+lang+' is not exited!') return Promise.resolve(false) } @@ -65,17 +64,27 @@ class LocaleOperator{ // } // 尚未加载 return Promise.all(this.dymicImporters[lang].map(importer=>{ - return importer() - // .catch(e=>{ - // console.error('[@vitescv/i18n] '+lang+' is not exited!') - // return false - // }) - })).then((message)=>{ - this.i18n.mergeLocaleMessage(lang,message.default) - // this.i18n.setLocaleMessage(lang, message.default) - this.langsLoaded.push(lang) - return this.setLocale(lang) + if(typeof importer == 'function'){ + importer = importer() + } + if(importer instanceof Promise){ + return importer.then(m=>m.default).catch(e=>{ + console.error('[@vitescv/i18n] '+e.message) + return false + }) + } + return importer + })) + .then((messages)=>{ + messages.forEach(message=>{ + this.i18n.mergeLocaleMessage(lang,message) + // this.i18n.setLocaleMessage(lang, message) }) + this.langsLoaded.push(lang) + return this.setLocale(lang) + }).catch(e=>{ + console.error(e) + }) } } @@ -89,9 +98,28 @@ export default async function(option,Context){ silentFallbackWarn:false, messages:{} },option) + // 初始化 + const localeOperator = new LocaleOperator(option) + // 注入Context语言包加载语言包方法给第三方 + Context.I18n = { + // 增加语言包对应的加载方法或者数据 + setLocaleMessage(lang,importer){ + if(localeOperator.langs.includes(lang)){ + localeOperator.dymicImporters[lang].push(importer) + } + }, + // setLocaleMessage的批量方法，importers为lang和importer的映射对象 + setLocaleMessages(importers){ + for (const lang in importers) { + this.setLocaleMessage(lang,importers[lang]) + } + }, + // 获取支持的语言包列表 + langs:localeOperator.langs, + // i18n实例 + i18n:localeOperator.i18n, + } - const localeOperator = new LocaleOperator(option,Context) - await localeOperator.loadLocaleMessage(option.locale) Context.hook("APP:INIT",function(options) { Object.assign(options,{ i18n:localeOperator.i18n, @@ -106,9 +134,11 @@ export default async function(option,Context){ }) Context.hook("APP:CREATED",function(){ + // 初始化默认语言 + localeOperator.loadLocaleMessage(localeOperator.getLocale()) // 注册router钩子函数来判断语言 Context.router.beforeEach((to,from,next)=>{ - localeOperator.loadLocaleMessage(option.locale).then(next()) + localeOperator.loadLocaleMessage(localeOperator.i18n.locale).then(next()) }) }) } \ No newline at end of file diff --git a/packages/i18n/readme.md b/packages/i18n/readme.md index b6407b5..4b0a0e9 100644 --- a/packages/i18n/readme.md +++ b/packages/i18n/readme.md @@ -45,4 +45,25 @@ export default { }, ... } -``` \ No newline at end of file +``` + +#### 扩展 + +该模块扩展了上下文，提供`Context.I18n`对象可以在其他摸块中提供对语言解决方案,该对象的api如下： + +- **langs** + +​ 当前支持的语言列表数组 + +- **i18n** + +​ vue-i18n的实例 + +- **setLocaleMessage(lang,importer)** + +​ 针对某个语言增加全局语言包或者语言包加载器，其中importer方法可以返回一个json数据，也可以返回一个promise实现异步加载 + +- **setLocaleMessages(importers)** + + setLocaleMessage的批量方法，importers为lang和importer的映射对象 + diff --git a/packages/vuetify/config.js b/packages/vuetify/config.js index 22f4f87..4d4a55f 100644 --- a/packages/vuetify/config.js +++ b/packages/vuetify/config.js @@ -18,5 +18,4 @@ export default { } } ], - manualChunks:{'vuetifyui': ['vuetify/lib']}, } \ No newline at end of file diff --git a/packages/vuetify/index.js b/packages/vuetify/index.js index f292708..b76cfeb 100644 --- a/packages/vuetify/index.js +++ b/packages/vuetify/index.js @@ -1,5 +1,5 @@ /** - * Element-ui for vitescv & vue2 + * vuetify for vitescv & vue2 * 配置信息可选，主要是设置多语言，依赖于vue-i18n 如下 * @param option * { @@ -11,43 +11,26 @@ */ import Vuetify from 'vuetify/lib' import 'vuetify/dist/vuetify.min.css' -<%option = option ||{langs:{}}%> +const importers = { +<%if(option.langs){%> <%for(let lang in option.langs){%> -import <%=lang%>_lang from 'vuetify/lib/locale/<%=option.langs[lang]%>' + <%=lang%>:()=>import("vuetify/lib/locale/<%=option.langs[lang]%>.js").then(m=>{return {default:{'$vuetify':m.default}}}), <%}%> -const langs = {} -<%for(let lang in option.langs){%> -langs.<%=lang%> = <%=lang%>_lang <%}%> +} -export default function(option,{Vue,hook}){ - option = Object.assign({ - langs:{'en':'en'} - },option) - Vue.use(Vuetify) - hook("APP:INIT",function(options) { - const vuetify = new Vuetify(Object.assign(option,{ +export default function(option,Context){ + Context.Vue.use(Vuetify) + Context.I18n.setLocaleMessages(importers) + Context.hook("APP:INIT",function(options) { + const optionVuetify = Object.assign({ lang: { - locales: langs, - current: 'en', + t: (key, ...params) => Context.I18n.i18n.t(key, params), }, - })) + },option.option) + const vuetify = new Vuetify(optionVuetify) Object.assign(options,{ vuetify, - mixin:{ - created(){ - if(this.$i18n){ - this.$vuetify.lang.current = this.$i18n.locale - } - }, - watch:{ - '$i18n.locale'(newLocal) { - this.$vuetify.lang.current = newLocal - } - } - } }) }) - // hook("APP:created",function(options) { - // }) } \ No newline at end of file diff --git a/packages/vuetify/package.json b/packages/vuetify/package.json index 28839f9..e6dbaa0 100644 --- a/packages/vuetify/package.json +++ b/packages/vuetify/package.json @@ -1,6 +1,6 @@ { "name": "@vitescv/vuetify", - "version": "1.0.5", + "version": "2.0.0", "description": "vuetify module for vitescv", "main": "index.js", "type": "module", @@ -15,7 +15,8 @@ "sass-loader": "^13.3.2", "vue": "^2.7.14" }, - "scripts": { - "test": "echo \"Error: no test specified\" && exit 1" + "peerDependencies": { + "vitescv":"^2.0.0", + "@vitescv/i18n":"^2.0.0" } } \ No newline at end of file diff --git a/packages/vuetify/readme.md b/packages/vuetify/readme.md index 0ccf3db..6377f91 100644 --- a/packages/vuetify/readme.md +++ b/packages/vuetify/readme.md @@ -17,13 +17,13 @@ pnpm add @vitescv/vuetify modules:{ ... "@vitescv/vuetify":{ - // 与i18n的语言包映射关系 + // 与i18n的语言包映射关系,模块会自动根据这些配置导入对应的语言包 "langs":{ 'en':'en', 'zh':'zh-Hans', ... }, - // vuetify的初始化配置，lang部分已经自动根据上面的配置处理了,无需处理 + // vuetify的初始化配置，lang部分已经自动根据上面的配置自动处理了,如果自行设置会覆盖原有的自动处理 "option":{ ... }