Element UIVue 2.x國際化完全指南多語言配置、vue-i18n 兼容與源碼級(jí)原理解析【免費(fèi)下載鏈接】elementA Vue.js 2.0 UI Toolkit for Web項(xiàng)目地址: https://gitcode.com/gh_mirrors/eleme/elementElement 組件庫默認(rèn)內(nèi)置簡體中文但在國際化產(chǎn)品中你需要將其切換為英文、日文、法文等數(shù)十種語言并與vue-i18n深度整合以支持運(yùn)行時(shí)語言切換。本文以官方 i18n 文檔為主線完整覆蓋 Element 多語言配置的三種引入方式、vue-i18n5.x與6.x的兼容方案、CDN 加載語言包等全部實(shí)戰(zhàn)步驟并結(jié)合本倉庫 locale 模塊源碼 剖析use/t/i18n三個(gè)核心 API 的底層實(shí)現(xiàn)幫助你徹底理解 Element 的國際化機(jī)制并能夠自行定制、擴(kuò)展語言包。一、Element 國際化機(jī)制總覽Element 的組件文案如分頁器、日期選擇器、消息彈框的按鈕文字統(tǒng)一通過一套語言包locale管理。語言包的默認(rèn)文件為 src/locale/lang/zh-CN.js其結(jié)構(gòu)是el命名空間下按組件分組的鍵值對(duì)象例如export default { el: { pagination: { goto: 前往, pagesize: 條/頁, total: 共 {total} 條, pageClassifier: 頁 }, // colorpicker / datepicker / select / cascader / ... 每個(gè)組件一組 } }組件內(nèi)部并不直接書寫文案而是通過 src/mixins/locale.js 混入的t方法讀取當(dāng)前語言包import { t } from element-ui/src/locale; export default { methods: { t(...args) { return t.apply(this, args); } } };最終所有文案的查詢、解析與切換都匯聚到 src/locale/index.js 這一核心模塊。它對(duì)外暴露三個(gè) APIAPI作用對(duì)應(yīng)源碼use(lang)切換當(dāng)前語言包src/locale/index.js#L40-L42t(path, options)按點(diǎn)路徑取文案支持{name}占位符插值src/locale/index.js#L23-L38i18n(fn)注入自定義翻譯處理器對(duì)接 vue-i18n 等src/locale/index.js#L44-L46其中t的查找邏輯是先用自定義的i18nHandler嘗試翻譯若返回空則回退到內(nèi)置語言包按路徑逐級(jí)取值最后調(diào)用 src/locale/format.js 中的模板函數(shù)完成{total}、{checked}等占位符替換。format內(nèi)部使用正則/(%|)\{([0-9a-zA-Z_])\}/g匹配占位符并從參數(shù)對(duì)象中取值替換參見 src/locale/format.js#L3-L43。二、基本用法為 Element 設(shè)置語言Element 組件內(nèi)部默認(rèn)使用中文若希望使用其他語言則需要進(jìn)行多語言設(shè)置。以英文為例在main.js中2.1 完整引入 Element// 完整引入 Element import Vue from vue import ElementUI from element-ui import locale from element-ui/lib/locale/lang/en Vue.use(ElementUI, { locale })Vue.use(ElementUI, opts)時(shí)opts.locale會(huì)被傳入插件的install函數(shù)進(jìn)而調(diào)用locale.use(opts.locale)完成語言包切換該調(diào)用鏈在 src/index.js#L183-L185 中有明確體現(xiàn)const install function(Vue, opts {}) { locale.use(opts.locale); locale.i18n(opts.i18n); // ... 注冊(cè)所有組件 };2.2 按需引入 Element// 按需引入 Element import Vue from vue import { Button, Select } from element-ui import lang from element-ui/lib/locale/lang/en import locale from element-ui/lib/locale // 設(shè)置語言 locale.use(lang) // 引入組件 Vue.component(Button.name, Button) Vue.component(Select.name, Select)注意這里的element-ui/lib/locale即構(gòu)建產(chǎn)物中的 locale 模塊其默認(rèn)導(dǎo)出對(duì)象包含use、t、i18n三個(gè)方法對(duì)應(yīng) src/locale/index.js#L48 的export default { use, t, i18n }所以可以在按需注冊(cè)組件前手動(dòng)調(diào)用locale.use(lang)完成切換。三、用 webpack 替換默認(rèn)語言包NormalModuleReplacementPlugin如果使用其它語言默認(rèn)情況下中文語言包依舊是被引入的。這是因?yàn)?locale 模塊在源碼層面直接import defaultLang from element-ui/src/locale/lang/zh-CN見 src/locale/index.js#L1構(gòu)建產(chǎn)物同樣保留了這一默認(rèn)依賴。你可以使用 webpack 的NormalModuleReplacementPlugin把默認(rèn)語言包直接替換為目標(biāo)語言從而避免多打包一份中文包webpack.config.js{ plugins: [ new webpack.NormalModuleReplacementPlugin(/element-ui[\/\\]lib[\/\\]locale[\/\\]lang[\/\\]zh-CN/, element-ui/lib/locale/lang/en) ] }該正則同時(shí)匹配/與\兩種路徑分隔符兼容 Windows 與 Linux/macOS 下的打包環(huán)境。替換后整個(gè)構(gòu)建產(chǎn)物將不再攜帶中文語言包包體積更小。四、兼容vue-i18n5.xElement 兼容vue-i18n5.x搭配使用能更方便地實(shí)現(xiàn)多語言切換——切換應(yīng)用語言時(shí)Element 組件文案會(huì)跟隨vue-i18n同步變化import Vue from vue import VueI18n from vue-i18n import Element from element-ui import enLocale from element-ui/lib/locale/lang/en import zhLocale from element-ui/lib/locale/lang/zh-CN Vue.use(VueI18n) Vue.use(Element) Vue.config.lang zh-cn Vue.locale(zh-cn, zhLocale) Vue.locale(en, enLocale)這種兼容能力來自 src/locale/index.js#L9-L21 的i18nHandler默認(rèn)實(shí)現(xiàn)它會(huì)探測原型上的$t方法以及Vue.locale若檢測到 5.x 的vue-i18n環(huán)境則首次使用時(shí)通過deepmerge把 Element 語言包與 vue-i18n 的 messages 深度合并Vue.locale(Vue.config.lang, deepmerge(lang, Vue.locale(Vue.config.lang) || {}, { clone: true }))隨后委托$t進(jìn)行翻譯從而讓兩套文案共用同一個(gè)翻譯管線。五、兼容其他 i18n 插件如果不使用vue-i18n5.x而是用其他的 i18n 插件Element 將無法自動(dòng)兼容但是可以自定義 Element 的 i18n 處理方法——通過i18n選項(xiàng)注入你自己的翻譯函數(shù)import Vue from vue import Element from element-ui import enLocale from element-ui/lib/locale/lang/en import zhLocale from element-ui/lib/locale/lang/zh-CN Vue.use(Element, { i18n: function (path, options) { // path 形如 el.datepicker.todayoptions 為插值參數(shù)對(duì)象 // 在這里調(diào)用你自定義 i18n 插件的翻譯方法并返回結(jié)果 } })傳入的i18n函數(shù)會(huì)通過locale.i18n(opts.i18n)src/index.js#L185覆蓋默認(rèn)的i18nHandler對(duì)應(yīng) src/locale/index.js#L44-L46此后每次組件調(diào)用t都會(huì)優(yōu)先進(jìn)入你的翻譯函數(shù)。若你的函數(shù)返回null或undefinedt會(huì)回退到內(nèi)置語言包繼續(xù)查找src/locale/index.js#L23-L26這一設(shè)計(jì)保證了自定義翻譯與內(nèi)置語言的平滑共存。六、兼容vue-i18n6.x默認(rèn)不支持 6.x 的vue-i18n6.x 移除了Vue.locale全局 API改為實(shí)例化VueI18n你需要手動(dòng)處理——把 Element 語言包展開合并進(jìn)VueI18n的messages再把實(shí)例的t方法注入給 Elementimport Vue from vue import Element from element-ui import VueI18n from vue-i18n import enLocale from element-ui/lib/locale/lang/en import zhLocale from element-ui/lib/locale/lang/zh-CN Vue.use(VueI18n) const messages { en: { message: hello, ...enLocale // 或者用 Object.assign({ message: hello }, enLocale) }, zh: { message: 你好, ...zhLocale // 或者用 Object.assign({ message: 你好 }, zhLocale) } } // Create VueI18n instance with options const i18n new VueI18n({ locale: en, // set locale messages, // set locale messages }) Vue.use(Element, { i18n: (key, value) i18n.t(key, value) }) new Vue({ i18n }).$mount(#app)要點(diǎn)說明...enLocale與Object.assign兩種寫法等價(jià)Element 語言包本身就是{ el: { ... } }結(jié)構(gòu)的普通對(duì)象可以直接展開進(jìn) messages通過i18n: (key, value) i18n.t(key, value)把VueI18n實(shí)例的t包裝后注入 Element組件文案便與VueI18n實(shí)例的locale狀態(tài)完全聯(lián)動(dòng)new Vue({ i18n })將實(shí)例掛載到根組件運(yùn)行時(shí)切換i18n.locale即可全局切換語言。七、按需加載里定制 i18n按需引入組件時(shí)同樣可以接入vue-i18n6.x區(qū)別在于不能通過Vue.use(Element, ...)傳參而要直接調(diào)用 locale 模塊的i18n方法import Vue from vue import DatePicker from element/lib/date-picker import VueI18n from vue-i18n import enLocale from element-ui/lib/locale/lang/en import zhLocale from element-ui/lib/locale/lang/zh-CN import ElementLocale from element-ui/lib/locale Vue.use(VueI18n) Vue.use(DatePicker) const messages { en: { message: hello, ...enLocale }, zh: { message: 你好, ...zhLocale } } // Create VueI18n instance with options const i18n new VueI18n({ locale: en, // set locale messages, // set locale messages }) ElementLocale.i18n((key, value) i18n.t(key, value))這里的ElementLocale.i18n(...)與完整引入時(shí)Vue.use(Element, { i18n })內(nèi)部執(zhí)行的locale.i18n(opts.i18n)src/index.js#L185是同一個(gè)入口因此按需引入時(shí)只要手動(dòng)調(diào)用一次即可讓已注冊(cè)組件的t走自定義翻譯。八、通過 CDN 的方式加載語言文件在非模塊化直接script標(biāo)簽場景下Element 提供 UMD 格式的語言包文件通過全局變量ELEMENT操作script src//unpkg.com/vue2/script script src//unpkg.com/element-ui/script script src//unpkg.com/element-ui/lib/umd/locale/en.js/script script ELEMENT.locale(ELEMENT.lang.en) /script搭配vue-i18n使用此時(shí)用的是vue-i18n的全局版本與Vue.localeAPI即 5.x 風(fēng)格的全局注冊(cè)方式script src//unpkg.com/vue2/script script src//unpkg.com/vue-i18n/dist/vue-i18n.js/script script src//unpkg.com/element-ui/script script src//unpkg.com/element-ui/lib/umd/locale/zh-CN.js/script script src//unpkg.com/element-ui/lib/umd/locale/en.js/script script Vue.locale(en, ELEMENT.lang.en) Vue.locale(zh-cn, ELEMENT.lang.zhCN) /script注意 UMD 語言包掛載到全局后ELEMENT.lang.zhCN對(duì)應(yīng)中文語言包、ELEMENT.lang.en對(duì)應(yīng)英文語言包而ELEMENT.locale(...)等價(jià)于源碼中的locale.use(...)方法src/index.js#L216 將locale.use作為Element.locale暴露。九、Element 內(nèi)置語言一覽目前 Element 內(nèi)置了以下語言對(duì)應(yīng)本倉庫 src/locale/lang 目錄下的語言包文件該目錄實(shí)際已包含超過 60 個(gè)語言的配置文件除下表外還有阿塞拜疆語 az、孟加拉語 bn、冰島語 is、老撾語 lo-LA、馬來語 ms、僧伽羅語 si、塞爾維亞拉丁文 sr-Latn、斯瓦希里語 sw、烏茲別克語 uz-UZ、亞美尼亞語 hy-AM 等語言locale 標(biāo)識(shí)語言locale 標(biāo)識(shí)簡體中文zh-CN英語en德語de葡萄牙語pt西班牙語es丹麥語da法語fr挪威語nb-NO繁體中文zh-TW意大利語it韓語ko日語ja荷蘭語nl越南語vi俄語ru-RU土耳其語tr-TR巴西葡萄牙語pt-br波斯語fa泰語th印尼語id保加利亞語bg波蘭語pl芬蘭語fi瑞典語sv-SE希臘語el斯洛伐克語sk加泰羅尼亞語ca捷克語cs-CZ烏克蘭語ua土庫曼語tk泰米爾語ta拉脫維亞語lv南非荷蘭語af-ZA愛沙尼亞語ee斯洛文尼亞語sl阿拉伯語ar希伯來語he立陶宛語lt蒙古語mn哈薩克斯坦語kz匈牙利語hu羅馬尼亞語ro庫爾德語ku維吾爾語ug-CN高棉語km塞爾維亞語sr巴斯克語eu吉爾吉斯語kg亞美尼亞語hy克羅地亞hr世界語eo十、擴(kuò)展與貢獻(xiàn)新的語言包如果你需要使用列表之外的語言可以為本倉庫貢獻(xiàn)語言文件只需在 src/locale/lang 目錄下新增一個(gè)語言配置文件即可。新語言包需遵循統(tǒng)一的結(jié)構(gòu)約定——頂層導(dǎo)出{ el: { 組件名: { 文案鍵: 值 } } }可參照 src/locale/lang/en.js 或 src/locale/lang/zh-CN.js 的完整結(jié)構(gòu)覆蓋 colorpicker、datepicker、select、cascader、pagination、messagebox、upload、table、tree、transfer、image、pageHeader、popconfirm、empty 等全部組件的文案含{total}、{checked}等占位符需一并保留。需要特別說明的是use切換語言包時(shí)并不做深校驗(yàn)語言包結(jié)構(gòu)越接近默認(rèn)語言包組件文案的命中率越高未命中的鍵會(huì)回退為空字符串見 src/locale/index.js#L34-L37 的if (!value) return 分支因此在新增語言包時(shí)建議以 zh-CN 或 en 為模板逐組補(bǔ)齊避免界面出現(xiàn)空白文案。十一、總結(jié)Element 國際化的三條路線怎么選僅切換靜態(tài)語言用Vue.use(ElementUI, { locale })或按需場景下的locale.use(lang)最簡單直接需要運(yùn)行時(shí)動(dòng)態(tài)切換語言接入vue-i18n5.x 自動(dòng)兼容6.x 按第六、七節(jié)手動(dòng)接線讓 Element 與業(yè)務(wù)文案共享同一翻譯管線深度定制翻譯邏輯通過Vue.use(Element, { i18n: fn })或locale.i18n(fn)注入自定義處理器Element 會(huì)在自定義翻譯返回空時(shí)自動(dòng)回退內(nèi)置語言包追求極致包體積用 webpackNormalModuleReplacementPlugin在構(gòu)建期替換掉默認(rèn)中文語言包。理解 src/locale/index.js 中use/t/i18n三者的協(xié)作關(guān)系——先自定義翻譯、再內(nèi)置語言包回退、最后占位符插值——你就能在任何構(gòu)建方式完整引入、按需引入、CDN下從容完成 Element 的多語言適配?！久赓M(fèi)下載鏈接】elementA Vue.js 2.0 UI Toolkit for Web項(xiàng)目地址: https://gitcode.com/gh_mirrors/eleme/element創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考