[[396348]]

本文轉(zhuǎn)載自微信公眾號(hào)「勾勾的前端世界  」，作者西嶺。轉(zhuǎn)載本文請(qǐng)聯(lián)系勾勾的前端世界公眾號(hào)。

1、基礎(chǔ)構(gòu)建-React

基礎(chǔ)應(yīng)用代碼安裝

基礎(chǔ)代碼：

2、基礎(chǔ)配置 webpack.config.js

package.json 啟動(dòng)命令：

3、導(dǎo)出微應(yīng)用

4、導(dǎo)入應(yīng)用模塊

在組件中使用

5、模塊聯(lián)邦實(shí)現(xiàn) Vue3.0 微前端架構(gòu)

完整代碼示例：modulefederationvue3: 基于模塊聯(lián)邦實(shí)現(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ǔ)代碼及對(duì)應(yīng)配置后，分別啟動(dòng) home 及 layout 兩個(gè)應(yīng)用項(xiàng)目就可以在 layout 應(yīng)用的 about 看到 home 應(yīng)用中的 User 組件的內(nèi)容了。