完結(jié)篇:模塊聯(lián)邦實現(xiàn)微應(yīng)用
本文轉(zhuǎn)載自微信公眾號「勾勾的前端世界 」,作者西嶺。轉(zhuǎn)載本文請聯(lián)系勾勾的前端世界公眾號。
1、基礎(chǔ)構(gòu)建-React
基礎(chǔ)應(yīng)用代碼安裝
基礎(chǔ)代碼:
2、基礎(chǔ)配置 webpack.config.js
package.json 啟動命令:
3、導(dǎo)出微應(yīng)用
4、導(dǎo)入應(yīng)用模塊
在組件中使用
5、模塊聯(lián)邦實現(xiàn) Vue3.0 微前端架構(gòu)
完整代碼示例:modulefederationvue3: 基于模塊聯(lián)邦實現(xiàn)的 Vue3.0 微前端架構(gòu)示例 (gitee.com)
地址:https://gitee.com/xilinglaoshi1/modulefederationvue3
package.json
1)在 home 應(yīng)用中導(dǎo)出模塊
home\webpack.config.js
2) 在 layout 應(yīng)用中導(dǎo)入
layout\webpack.config.js
layout\src\views\About.vue
寫好基礎(chǔ)代碼及對應(yīng)配置后,分別啟動 home 及 layout 兩個應(yīng)用項目就可以在 layout 應(yīng)用的 about 看到 home 應(yīng)用中的 User 組件的內(nèi)容了。