鏈枃寮€濮嬶紝绗旇€呭噯澶囧紑涓€涓皬缂栵紝鍙玀odernVueProject銆傛湰鏂囦负鎴戝徃寮€婧愬伐鍏蜂骇鍝丅ytebase鐨勯娆″浗闄呭寲鍥介檯鍖栧紑鍙戯紝鐩墠浠呮彁渚涜嫳鏂囩増鏈€傜ぞ鍖洪噷涔熸湁灏忎紮浼撮棶鏈夋病鏈夋眽鍖栫増鐨勮鍒掞紝绛旀褰撶劧鏄湁銆傛垜浠殑鍥㈤槦璁″垝鍦ㄤ笅涓€涓増鏈彂甯冩棩鏈?2鏈?3鏃ュ彂甯冨浗闄呭寲鏀寔銆傚鏋滈『鍒╋紝鎴戜滑灏嗗叏闈㈡敮鎸佷腑鑻辨枃鐗堟湰鐨勫垏鎹€傚仛杩囧墠绔浗闄呭寲瑙ｅ喅鏂规鐨勫簲璇ラ兘鏄庣櫧锛岀淮鎶ゅぇ閲忔枃妗堢炕璇戞槸浠跺ご鐤肩殑浜嬶紝寰掓墜缈昏瘧鏇存槸浣撳姏娲汇€傛牴鎹瑪鑰呬互寰€鐨勭粡楠岋紝鏃犺鏄敤鏂囨鎻愬彇宸ュ叿涓€娆℃€ф彁鍙栨枃妗堣繘琛岀炕璇戯紝杩樻槸鎵嬪姩灏嗘枃妗堜竴涓竴涓彁鍙栧埌鏂囨璧勪骇涓€傚鏉傞」鐩腑閬囧埌鐨勪竴浜涢棶棰橈紝寰€寰€涓嶆槸缈昏瘧涓€涓瘝鎴栦竴鍙ヨ瘽閭ｄ箞绠€鍗曘€傛墍浠ョ瑪鑰呮€荤粨浜嗕竴浜涘湪Vue椤圭洰涓疄鐜板浗闄呭寲i18n鐨勫紑鍙戞柟娉曪紝涓昏閽堝Vue椤圭洰銆傛墍璋撶幇浠ue椤圭洰灏辨槸浣跨敤涓€浜涘ソ鐢ㄧ殑宸ュ叿锛岃繖浜涘伐鍏峰彲鑳芥槸浣犱互鍓嶆病鏈夋帴瑙﹁繃鐨勶紝涔熷彲鑳芥槸浣犳鍦ㄤ娇鐢ㄧ殑锛屽畠浠槸涓€浜涙彁楂樺紑鍙戞晥鐜囩殑鏂规硶銆佸伐鍏风瓑銆傛湰鏈熶富瑕佷粙缁嶇殑宸ュ叿鏄疺SCode鎻掍欢i18n-ally鍥介檯鍖杋18n寮€鍙戞弧瓒虫潯浠禫SCodeVSCode鎻掍欢i18n-allyVue椤圭洰闆嗘垚vue-i18n鎺ヤ笅鏉ユ垜灏嗛€氳繃Vite鍒涘缓涓€涓猇ue3demo椤圭洰鏉ュ疄璺典竴涓嬩綘濡備笅鍦╒ue椤圭洰涓浣曞仛鍥介檯鍖栶煂伴」鐩湴鍧€锛歨ttps://github.com/xiaoluoboding/vue-i18n-practiceTL;DR鍒濆鍖朧ue椤圭洰鍦╲ite涓厤缃畍ue-i18n鎸佷箙鍖栫敤鎴烽€夋嫨涔犳儻浣跨敤i18n-ally鎻掍欢-in鍔犲揩缈昏瘧杩囩▼鍒濆鍖朧ue椤圭洰浣跨敤Vite鍒涘缓Vue椤圭洰锛寁ue-ts妯℃澘鎴戦€夋嫨yarncreatevite鉁旈」鐩悕绉帮細...vue-i18n-practice鉁旈€夋嫨妗嗘灦锛氣€簐ue鉁旈€夋嫨涓€涓獀ariant:鈥簐ue-ts馃敆鏌ョ湅commit:https://github.com/xiaoluobod...vite涓厤缃畍ue-i18n闇€瑕佸畨瑁呬笁涓簱锛歷ue-i18n@next@types/node@intlify/vite-鎻掍欢-vue-i18nPS銆傚湪Vue3椤圭洰涓垜浠渶瑕佸畨瑁呬笅涓€涓増鏈殑vue-i18nyarnaddvue-i18n@next-S&&yarnadd@types/node@intlify/vite-plugin-vue-i18n-D閰嶇疆vite.config.ts鍒板皢璇█鐜鏂囦欢璺緞鎸囧畾涓簊rc/localesimport{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'import{resolve}from'path'importVueI18nfrom'@intlify/vite-plugin-vue-i18n'//https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue(),//https://github.com/intlify/vite-plugin-vue-i18nVueI18n({//瀹氫箟璇█鐜鏂囦欢鐩綍include:[resolve(__dirname,'src/locales/**')],}),],})鍜孷ue鎻掍欢浣跨敤i18n锛?/plugins/i18n.tsimport{App}from'vue'import{createI18n}from'vue-i18n'constlocalPathPrefix='../locales/'//importi18nresources//https://vitejs.dev/guide/features.html#glob-importconstmessages=Object.fromEntries(Object.entries(import.meta.globEager('../locales/*.y(a)?ml')).map(([key,value])=>{constyaml=key.endsWith('.yaml')return[key.slice(localPathPrefix.length,yaml?-5:-4),value.default]}))constinstall=(app:App)=>{consti18n=createI18n({legacy:false,locale:'en',globalInjection:true,messages,})app.use(i18n)}exportdefaultinstall娣诲姞鍓湰{{$t('common.home')}}
//en.ymlcommon:home:棣栭〉//zh_cn.ymlcommon:home:鏈€鍚庢樉绀虹殑棣栭〉鏁堟灉濡備笅锛氿煍楀彲浠ユ煡鐪媍ommit锛歨ttps://github.com/xiaoluobod...鍧氭寔鐢ㄦ埛璇█閫夋嫨涔犳儻銆備竴鑸敤鎴峰湪閫夋嫨璇█鐗堟湰鍚庯紝甯屾湜鍐嶆杩涘叆缃戠珯鏃剁湅鍒版垜閫夋嫨鐨勮瑷€銆傜増鏈墍浠ユ垜浠渶瑕佷繚瀛樼敤鎴风殑鍋忓ソ銆傝繖閲屾帹鑽愪娇鐢╨ocalStorage鏉ュ瓨鍌ㄧ敤鎴锋暟鎹€備笅闈粙缁嶄竴涓瘮杈冨ソ鐢ㄧ殑搴擄紝鎶婅繖涓満鏅拰鐢ㄦ埛琛屼负鎸佷箙鍖栫粨鍚堣捣鏉ャ€備娇鐢ˊvueuse/core搴撲腑鐨剈seLocalStorage瀹炵幇鐩稿簲鐨勯厤缃」鏉ヨ缃垵濮嬪€笺€備笅娆¤繘鍏ュ簲鐢ㄦ椂锛屼細鍏堣鍙杔ocalStorage涓殑鍊硷紝浠ｈ〃鐢ㄦ埛閫夋嫨鐨勮瑷€鐗堟湰=storage.value鎸夌収鎸夐挳鏇存敼璇█鐗堟湰锛岃缃负localStorageconstsetLang=(lang:string)=>{conststorage=useLocalStorage('site_locale','')storage.value=lang}馃敆鍙互鏌ョ湅commit:https://github.com/xiaoluobod...浣跨敤i18n-ally鎻掍欢鍔犻€熺炕璇戣繃绋嬫劅璋nthonyFu鎻愪緵鐨刬18n-ally鎻掍欢锛屽熀浜嶸SCode鐨勯€氱敤涓€绔欏紡缈昏瘧鎻掍欢涓嶄粎浠呯敤浜嶸ue椤圭洰涓殑缈昏瘧鍦烘櫙锛屽ぇ瀹跺彲浠ラ槄璇诲畼鏂规枃妗ｃ€備紶缁熺殑缈昏瘧杩囩▼锛屽彲鑳藉ぇ閮ㄥ垎寮€鍙戣€呴兘閬囧埌杩囷紝灏辨槸鐪嬪埌澶嶅埗锛屽鍒剁矘璐村埌瀵瑰簲鐨刲ocales鏂囦欢涓繘琛岀炕璇戯紝鑰岀幇鍦ㄦ垜浠娇鐢╥18n-ally鎻掍欢锛屽彲浠ヨ繘涓€姝ュ姞蹇炕璇戣繃绋嬶紝涔熻鍙渶瑕佺偣鍑诲嚑涓嬪氨鍙互瀹屾垚鏂囨鐨勭炕璇戙€傚畨瑁匳Scodei18n-ally鎻掍欢銆傚湪VSCode鎵╁睍涓悳绱18n-ally锛屽嵆鍙惎鐢╥18n-ally鎻掍欢銆傛帹鑽愪娇鐢ㄩ」鐩腑鐨?vscode閰嶇疆椤归厤缃?/.vscode/settings.json{"i18n-ally.localesPaths":["src/locales"],"i18n-ally.enabledParsers":["yaml"],"i18n-ally.sourceLanguage":"en","i18n-ally.displayLanguage":"zh-cn","i18n-ally.keystyle":"nested"}鍐嶆鎵撳紑Vue缁勪欢HelloWorld.vue锛屽彲浠ョ湅鍒版枃妗堟湁浜涘彉鍖栵細杩欐槸鎻掍欢InlineAnnotations锛堝唴鑱旀敞閲婏級鐨勪竴涓壒鎬э紝褰?t('common.home')琚槧灏勪负鑻辨枃鈥淗ome鈥濄€傚綋鐒讹紝鎴戜滑涔熷彲浠ラ€氳繃鏇存敼閰嶇疆椤逛腑鐨勨€渋18n-ally.sourceLanguage鈥濈殑鍊硷紝灏嗗叾鏄犲皠涓鸿嚜宸卞枩娆㈢殑璇█銆傜炕璇戣繃绋嬭瑷€鏂囦欢鐨勬湳璇?/locale/en.yml|/locale/zh_CN.yml鍛藉悕绌洪棿鈥斺€斿湪i18n-ally涓绉颁负璺緞锛屾垜绉颁箣涓衡€滃懡鍚嶇┖闂粹€濓紙namespace锛夋瘮濡傝瑷€鏂囦欢涓殑涓€妫垫爲灞傛鍏崇郴锛?common.save','field.name',etc.t鏍煎紡鍖栨柟娉?t鏂规硶鏄痸ue-i18n鎻愪緵鐨勬枃妗堟牸寮忓寲缈昏瘧鏂规硶锛屽父鐢ㄦ牸寮忓涓嬶細Vue妯℃澘鎻掑€?{{$t('common.save')}}鍦╒ue妯℃澘缁勪欢鍙傛暟-$t('common.save')InVueScript-this.$t('common.save')/t('common.save')ExtractcopytoYAMLlanguage鏂囦欢i18n-ally鏀寔鎻愬彇浠ｇ爜涓殑鏂囨湰鏂囦欢杞寲涓鸿瑷€鏂囦欢锛屾敮鎸乊AML鍜孞SON鏂囦欢鐨勮鍐欐搷浣溿€傝繖涓姛鑳藉ぇ澶ф彁楂樹簡鎴戜滑鐨勭炕璇戦€熷害锛屾垜浠啀涔熶笉鐢ㄦ墜鍔ㄥ鍒剁矘璐存枃妗堜簡銆傛暣涓炕璇戣繃绋嬫垜浠笉闇€瑕佹墦寮€璇█鏂囦欢銆傝鎻掍欢灏嗗府鍔╂彁鍙栧壇鏈苟灏嗗叾鍐欏叆鐩稿簲鍛藉悕绌洪棿涓嬬殑鏈€鍚庝竴琛屻€傛垜浠墍鍋氱殑澶ч儴鍒嗗伐浣滄槸杞寲涓哄懡鍚嶅懡鍚嶇┖闂村拰鍓湰涔嬮棿鐨勫搴斿叧绯伙紝鍓╀笅鐨勭敱鎻掍欢鏉ュ鐞嗐€備竴涓矖鐣ョ殑缈昏瘧杩囩▼锛氶€変腑鏂囨锛岃В鍘嬫枃妗堝埌璇█鏂囦欢锛岃繘鍏ュ懡鍚嶇┖闂达紝鐢╰鏂规硶鏇挎崲鏂囨锛岀炕璇戝叾浠栬瑷€鐗堟湰棰勭炕璇戯紙鍙墜鍔ㄦ洿姝ｏ級缁勪欢鍐呴儴鐨勫唴鑱旇瘎璁哄鏍哥郴缁燂紙涓嶆槸杩樼敤杩囷級銆傝繖浜涚壒鐐硅鎴戜滑鑳藉蹇€熶笂鎵嬬炕璇戞枃妗堬紝杈惧埌杈瑰紑鍙戣竟缈昏瘧鐨勫鐣屻€傜炕璇戞妧宸ц繖閲屼粙缁嶄竴涓嬩娇鐢╲ue-i18n鏃堕亣鍒扮殑涓€浜涘父瑙佺殑缈昏瘧鐢ㄦ硶锛岀畝鍗曚粙缁嶄竴涓嬨€傛枃妗堝紩鐢ㄥ亣璁炬垜浠Н绱簡涓€浜涜瘝琛紝鍙互浠庤瘝涓嫾鎺ュ嚭涓€浜涜瘝鎴栬瘝缁勩€倂ue-i18n涓彁渚涗簡閾炬帴娑堟伅锛屾彁渚涗簡鍏朵粬鏂囨杩炴帴璇硶鐨勫弬鑰傽:xxx锛岀被浼间簬寮曠敤鍙橀噺锛岃繖绉嶆満鍒跺緢閫傚悎缁勫悎璇嶏紝姣斿缈昏瘧AppName锛屾垜浠彲浠ュ畾涔変袱涓畝鍗曠殑璇岮pp鍜孨ame锛屾嫾鍐欐垚涓€涓瘝缁勭殑AppName銆俢ommon:app:Appname:Nameheader:title:'@:common.app@:common.name'涓轰粈涔堜笉鐩存帴缈昏瘧AppName鍛紝涓嶉毦鍐欙紝鍏跺疄杩欎篃鏄€冭檻鍒颁汉宸ョ炕璇戠殑閿欒鍜岄敊鍒瓧鐨勯棶棰樻槸鍐欏浜嗭紝閿欒鍙兘灏卞浜嗐€備娇鐢↙inkedMessages鍙互閬垮厤杩欎釜闂锛岃€屼笖vue-i18n涔熸彁渚涗簡绫讳技淇グ绗︾殑鍐呯疆澹版槑鏂瑰紡锛屾瘮濡傦細upper,lower,capitalize鍦ㄧ炕璇戣嫳鏂囨枃妗堟椂鏈夊府鍔┿€傪煍楀彲浠ユ煡鐪媍ommit:https://github.com/xiaoluobod...浼犳彃鍊兼槸甯哥敤鐨勬柟寮忥紝绫讳技浜庝紶鍙橀噺锛屾垜浠ュ畼缃戜负渚嬶細passamsg
