vite-plugin-federation

.red{color:red;}.bold{font-weight:bold;}鑳屾櫙闅忕潃涓氬姟閲忕殑鎵╁ぇ鍜屼笟鍔″鏉傚害鐨勯€愭笎澧炲姞锛屾垜浠殑绯荤粺鍦ㄥ揩閫熸垚闀跨殑杩囩▼涓篃閬囧埌浜嗗伐绋嬫墿瀹广€佸紑鍙戠淮鎶ゅ洶闅俱€佸紑鍙戝洟闃熷崗浣滃洶闅剧瓑鐩稿叧闂..闅忓悗锛屽井鍓嶇鐨勬蹇典篃涓嶆柇琚彁鍑恒€備綔涓烘柊鍏寸殑鍓嶇寮€鍙戞瀯寤哄伐鍏凤紝vite涔熼渶瑕佸湪杩欐柟闈㈣繘琛屾帰绱㈠拰灏濊瘯銆傛杩皏ite-plugin-federation鏄负vite鎻愪緵鐨勶紝鐢ㄤ簬鏀寔澶氫釜鐙珛鏋勫缓鐨勫簲鐢ㄧ▼搴忥紝杩欎簺搴旂敤绋嬪簭鍙互灏嗗叾閮ㄥ垎鍔熻兘浣滀负缁勪欢鎻愪緵锛屽舰鎴愪竴涓簲鐢ㄧ▼搴忋€傚畠浠箣闂存病鏈夌浉浜掍緷璧栧叧绯伙紝鍙互鐙珛寮€鍙戝拰閮ㄧ讲銆傚彈鍒皐ebpack5鎻愪緵鐨凪oduleFederation鐗规€х殑鍚彂锛岃櫧鐒惰繖涓彃浠惰繕鍦ㄨ瘔璇存垚闀胯繃绋嬩腑锛屼絾鏄凡缁忓彈鍒颁簡vite绀惧尯鐨勫叧娉紝骞惰鏀跺綍鍦ㄤ簡瀹冪殑framework鎻掍欢涓€備粈涔堟槸妯″潡鑱旂洘锛烳oduleFederation鏄竴涓兂瑕佸姩鎬佸紩鐢ㄥ叾浠栧簲鐢ㄧ▼搴忕殑妯″潡銆傝繖閲岀殑modules鍜岄€氬父鐨勬剰鎬濅竴鏍锋瘮..涓婄殑搴旂敤绾у井鍓嶇鏇村皬銆傛瘮濡傛垜浠钩鏃跺叕寮€浣跨敤鐨勫ご閮ㄥ鑸€佷晶杈规爮绛夈€傛瘡涓簲鐢ㄧ▼搴忛兘鐙珛鏋勫缓銆佹墦鍖呫€侀儴缃层€佸紩鐢ㄥ苟鏍规嵁闇€瑕佺粍鍚堝舰鎴愪竴涓柊鐨勫簲鐢ㄧ▼搴忋€傞€氬父锛屾ā鍧楀拰鐩稿叧淇℃伅閫氳繃缁熶竴鐨勫叆鍙ｆ枃浠舵毚闇茬粰澶栫晫锛屽叡浜ā鍧楅€氳繃寮傛寮曠敤鍔犺浇渚涜嚜宸变娇鐢ㄣ€備负浠€涔堟垜浠娇鐢╒ite馃挕浣跨敤鍘熺敓ESM鏂囦欢鏋侀€熷惎鍔ㄦ湇鍔★紝鏃犻渶鎵撳寘锛佲殹锔忚交閲忕骇鍜屽揩閫熺儹閲嶈浇鏃犺搴旂敤绋嬪簭澶у皬濡備綍锛屽缁堣秴蹇€熸ā鍧楃儹閲嶈浇(HMR)馃洜锔忓紑绠卞嵆鐢ㄥ湴鏀寔TypeScript銆丣SX銆丆SS绛変赴瀵岀殑鍔熻兘銆傪煋︿紭鍖栨瀯寤洪閰嶇疆鐨凴ollup鏋勫缓鍏锋湁鍙€夌殑鈥滃椤靛簲鐢ㄧ▼搴忊€濇垨鈥滃簱鈥濇ā寮忦煍╅€氱敤鎻掍欢鍦ㄥ紑鍙戝拰鏋勫缓涔嬮棿鍏变韩Rollup-superset鎻掍欢鎺ュ彛銆傪煍戝畬鍏ㄧ被鍨嬪寲鐨凙PI鍏锋湁瀹屾暣TypeScript绫诲瀷鐨勭伒娲籄PI銆傚熀浜庝互涓妚ite涓烘垜浠彁渚涗簡杩欎箞澶氱殑鐞嗙敱锛屾垜浠湁鐞嗙敱灏唙ite浣滀负鍓嶇寮€鍙戞瀯寤哄伐鍏风殑鏈€浣抽€夋嫨涔嬩竴锛屽挨鍏舵槸鍦ㄥ墠绔」鐩秺鏉ヨ秺搴炲ぇ鐨勪粖澶╋紝蹇€熶慨鏀规墠鏄帇閬撴垜浠緱鍒颁簡澶氫箞缇庡鐨勪簨鎯呫€傛ā鍧楄仈閭﹂」鐩瀯寤虹殑鍩烘湰閫昏緫vite-plugin-federation閫氳繃vite鍜宺ollup鎻愪緵鐨刪ock浠嬪叆build鏂囦欢锛屽皢鎵€鏈夎繙绋嬫ā鍧楃殑缁勪欢鑱氬悎鍒皉emoteEntry.js涓€傛湰鍦版ā鍧椾娇鐢╮emoteEntry.js鍏ュ彛璋冪敤鍜屽姞杞戒笁鏂圭粍浠朵互鍙婄粍浠剁紪璇戝悗鐨刯s銆乧ss绛夋枃浠躲€俁emote锛氫笉灞炰簬褰撳墠鏋勫缓鐨勮繙绋嬫ā鍧楋紝浣跨敤鏃朵粠瀹瑰櫒锛堣繙绋嬫ā鍧楋級鍔犺浇缂栬瘧濂界殑鏂囦欢銆侶ost锛氫竴涓湰鍦版ā鍧楋紝瀹冧娇鐢ㄥ叾浠朢emotes鎻愪緵鐨勭粍浠躲€係hared锛欻ost鍦ㄤ娇鐢≧emote鎻愪緵鐨勭粍浠舵椂锛岄渶瑕佷緷璧栫涓夋柟搴擄紝濡倂ue銆乺eact绛夛紝鏇村叿浣撶殑鏋舵瀯鍙互鍙傝€冪ぞ鍖烘灦鏋勬枃妗ｃ€傚浣曚笂鎵嬪熀浜巚ite鐨勪紭鍔匡紝绀惧尯璐＄尞浜唙ite-plugin-federation锛屽彲浠ヨ鎴戜滑鍦ㄦ湰鍦版ā鍧椾腑浣跨敤remote妯″潡鐨勭函js缁勪欢锛屾彁鍙栦竴浜涘叕鍏辩粍浠跺拰灏忓洟闃熷紑鍙戜竴浜涚浉瀵圭嫭绔嬬殑鍔熻兘锛屽畬鎴愮嫭绔嬮儴缃插苟鎻愪緵缁欏叾浠栧師鐢熸ā鍧椾娇鐢ㄣ€備笅闈互vue3涓轰緥锛岀湅鐪嬪浣曞紑鍙戙€侀厤缃拰浣跨敤vite-plugin-federation鏉ュ疄鐜版垜浠殑鎯虫硶銆傚畨瑁卾ite骞跺垱寤轰竴涓獀ue3椤圭洰vite-plugin-federation鐢变簬鏄痸ite鐨勪竴涓粍浠讹紝鎵€浠ユ垜浠渶瑕佸厛瀹夎vite骞跺垱寤轰袱涓獀ue3椤圭洰銆傝繖浜涘噯澶囧伐浣滃湪姝や笉鍐嶈禈杩般€傛湁鍏磋叮鐨勬湅鍙嬪彲浠ュ厛鍘讳簡瑙ｄ竴涓嬨€傛瘮杈冪畝鍗曪細鎼缓绗竴涓猇ite椤圭洰褰撶劧锛屽鏋滀綘鐨勯」鐩洰鍓嶆鍦ㄤ娇鐢╳ebpack锛屾兂浣撻獙vite鍓嶇寮€鍙戞瀯寤哄伐鍏凤紝涔熷彲浠ヤ娇鐢╳ebpack-to-vite宸ュ叿灏嗗凡鏈夐」鐩繘琛岃浆鎹€傛煡鐪媣ite鏄惁鍦ㄦ墜銆傚畨瑁卾ite-plugin-federationnpmi@originjs/vite-plugin-federation鍩烘湰缁撴瀯projects鈹斺攢鈹€鈹€鈹€home//瀵瑰簲杩滅▼杩滅▼妯″潡鈹傗攤Content.vue//瀛愮粍浠垛攤鈹俠utton.js//瀛愮粍浠垛攤鈹倂ite.config.ts//瀵瑰簲閰嶇疆鈹傗敂鈹€鈹€鈹€layout//瀵瑰簲host鏈湴妯″潡鈹傗攤main.js//杩滅▼妯″潡寮傛瀵煎叆鈹傗攤vite.config.ts//瀵瑰簲閰嶇疆鍒涘缓Remote杩滅▼妯″潡1.鍒涘缓涓€涓獀ue3缁勪欢锛屼綘鍙互浣跨敤h鍑芥暟浠?vue"缁樺埗Button.jsimport{h};constbutton={name:"btn-component",render(){returnh("button",{id:"btn-remote",style:{'background-color':'red','border':'none','color':'white','padding':'15px32px','text-align'':'center','text-decoration':'none','display':'inline-block','font-size':'16px'},onClick:()=>{this.$store.state.cartItems++}},"浣犲ソ杩滅▼鎸夐挳");},};exportdefaultbutton;涔熷彲浠ヤ娇鐢╲ue3缁勪欢鏂囦欢Content.vue.red{color:red;}.bold{font-weight:bold;}娉ㄦ剰锛氫负浜嗛槻姝㈣繙绋嬫ā鍧椾笌鏈湴妯″潡浜や簰css鏍峰紡鐩镐簰姹℃煋锛屽彲浠ヤ娇鐢╟ss-module绛夛紝鐩稿叧鐨刢ss闅旂鏂规鎴栬€呭唴鑱旀牱寮?.鍦╲ite.config.ts涓厤缃甪ederation閫夐」vite.config.tsimport{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'//寮曞叆vite鐨刾luginsforvuesupportimportfederationfrom"@originjs/vite-plugin-federation";//importvite-plugin-federation//https://vitejs.dev/config/exportdefaultdefineConfig({plugins:[vue(),federation({name:'home',//杩滅▼妯″潡鍚嶇Оfilename:'remoteEntry.js',//杩滅▼妯″潡鍏ュ彛鏂囦欢锛屽搴旀湰鍦版ā鍧椾腑鐨刞remotes`閰嶇疆exposes:{'./Content':'./src/components/Content.vue',//缁勪欢鍚嶅強鍏跺搴旀枃浠?./Button':'./src/components/Button.js'},shared:["vue","vuex"]//澶栭儴鎻愪緵鐨勭粍浠朵緷璧栫殑绗竴涓粍浠朵笁鏂逛緷璧栵紝鏈緥浣跨敤`vue`,`vuex`锛岃繖閲屼篃鍙互閰嶇疆渚濊禆鐗堟湰锛屽弬鑰僠Readme.md`})],build:{target:'es2020',//瀵逛簬闈炲唴鑱旀牱寮忥紝闇€瑕佹瀯寤鸿鑼冩槸es2020锛屽惁鍒欐牱寮忔棤鏁堬紝鎺у埗鍙颁細鎻愮ずminify:false,cssCodeSplit:false,rollupOptions:{output:{minifyInternalExports:false}}}})3.涓鸿繙绋嬬涓夋柟渚濊禆椤硅缃甪ederation.shared閫夐」锛屽湪妯″潡鍜屾湰鍦版ā鍧椾箣闂村叡浜€傛牴鎹渶瑕佽缃甪ederation.shared閫夐」銆傚叿浣撹鍙傝€僾ite.config.tsexportdefaultdefineConfig({...plugins:[...federation({...shared:["vue","vuex"]//杩欓噷鏄畝鍗曢厤缃紝璇︾粏閰嶇疆璇风偣鍑诲弬鑰冩煡鐪嬪畼鏂筊eadme鏂囨。})],})鍦℉ost鏈湴妯″潡涓紝閰嶇疆浣跨敤杩滅▼妯″潡涓殑缁勪欢鑷虫锛屾垜浠惌寤虹殑杩滅▼妯″潡宸茬粡鎻愪緵浜嗕袱涓瓙缁勪欢Content鍜孊utton锛屼緵鏈湴妯″潡浣跨敤1.鍦╲ite.config.ts涓厤缃繙绋嬫ā鍧楃殑鍏ュ彛鏂囦欢vite.config.tsimport{defineConfig}from"vite";importvuefrom"@vitejs/plugin-vue";importfederationfrom"@originjs/vite-plugin-federation";//https://vitejs.dev/config/exportdefaultdefineConfig({server:{//host:"192.168.56.1",//灏濊瘯鍦╠ev鍦烘櫙涓樉绀哄０鏄庣殑ip鍜岀鍙ｉ槻姝vite`鍚姩鏃惰嚜鍔ㄨ幏鍙杋p鍜岀鍙ｇ殑鏈哄埗瀵艰嚧涓嶅噯纭殑闂//port:5100},cacheDir:"node_modules/.cacheDir",//瀛樻斁缂撳瓨鏂囦欢鐨勭洰褰曪紝闈炲叧閿厤缃」plugins:[vue(),federation({name:"layout",//杩滅▼妯″潡鍚嶏紝涓€涓湇鍔″彲浠ヤ綔涓烘湰鍦版ā鍧椾娇鐢ㄨ繙绋嬫ā鍧楃粍浠讹紝涔熷彲浠ヤ綔涓鸿繙绋嬫ā鍧楋紝鎻愪緵澶栭儴缁勪欢filename:"remoteEntry.js",//杩滅▼妯″潡鍏ュ彛鏂囦欢锛屽搴旀湰鍦版ā鍧椾腑`remotes`鐨勯厤缃畆emotes:{home:"http://localhost:5001/remoteEntry.js",//鐨勭綉缁滃湴鍧€杩滅▼妯″潡鐨勫叆鍙ｆ枃浠讹紝鐢ㄤ簬鑾峰彇杩滅▼妯″潡鐨刞remoteEntry.js`鍔犺浇缁勪欢"common-lib":"http://localhost:5002/remoteEntry.js","css-modules":"http://localhost:5003/remoteEntry.js"},shared:["vue","vuex"]//杩滅▼妯″潡缁勪欢浣跨敤鐨勭涓夋柟渚濊禆锛屽鏋滄湁鏈湴鐨勶紝鍙互浣跨敤鏈湴鐨勭涓€鐨?鍦╠ev妯″紡涓嬶紝灏介噺鍦ㄦ湰鍦板紩鐢ㄨ繖浜涚涓夋柟渚濊禆锛岄槻姝㈢涓夋柟缁勪欢鍦╠ev鍜宲ackaged妯″紡闂涓婁笉涓€鏍枫€倉)],build:{target:'es2020',minify:false,cssCodeSplit:true,rollupOptions:{output:{minifyInternalExports:false}}},});2.寮傛鍔犺浇杩滅▼缁勪欢main.jsimport{createApp,defineAsyncComponent}from"vue";importstorefrom'./store';importLayoutfrom"./Layout.vue";constHomeContent=defineAsyncComponent(()=>import("涓婚〉/鍐呭"));//鍒涘缓涓€涓彧鍦ㄩ渶瑕佹椂鍔犺浇鐨勫紓姝ョ粍浠讹紝杩滅▼妯″潡鍚?缁勪欢鍚峜onstHomeButton=defineAsyncComponent(()=>import("home/Button"));constapp=createApp(Layout);//杩斿洖涓€涓彁渚涚殑搴旂敤绋嬪簭涓婁笅鏂囩殑搴旂敤绋嬪簭瀹炰緥銆備竴涓簲鐢ㄥ疄渚嬫寕杞界殑鏁翠釜缁勪欢鏍戝叡浜悓涓€涓笂涓嬫枃銆俛pp.component("home-content",HomeContent);//灏嗚繙绋嬫ā鍧楃殑缁勪欢娉ㄥ唽涓虹粍浠禷pp.component("home-button",HomeButton);搴旂敤绋嬪簭浣跨敤锛堝晢搴楋級锛?/瀹夎Vue.js鎻掍欢锛岃繖閲屾槸`vuex`app.mount("#root");澹版槑vuex鎻掍欢锛屼笉鏄湰鏂囨秹鍙婄殑涓昏鍐呭锛屽彲浠ユ牴鎹渶瑕佺Щ妞峴tore.jsimport{createStore}from'vuex';exportdefaultcreateStore({state(){return{car鈥嬧€媡Items:5}}});3.浣跨敤缁勪欢