完结篇:模块联邦实现微应用

勾勾的前端世界

共 808字,需浏览 2分钟

 ·

2021-04-30 18:42

回忆一下之前几篇内容:

微前端落地:Systemjs模块化解决方案

微前端框架 single-spa:创建微前端容器应用。

创建基于 React 和 Vue 的微应用


广告 time:关注b站西岭老湿】,可查看微前端和 serverless 相关内容的视频讲解版,配合食用,学得超快!还有更多有关前端的好东西。


1、基础构建-React


基础应用代码安装



基础代码:




2、基础配置 webpack.config.js



package.json 启动命令:



3、导出微应用



4、导入应用模块



在组件中使用



5、模块联邦实现 Vue3.0 微前端架构


完整代码示例modulefederationvue3: 基于模块联邦实现的 Vue3.0 微前端架构示例 (gitee.com)  


地址:https://gitee.com/xilinglaoshi1/modulefederationvue3


package.json



1)在 home 应用中导出模块


home\webpack.config.js




2) 在 layout 应用中导入


layout\webpack.config.js



layout\src\views\About.vue



写好基础代码及对应配置后,分别启动 home 及 layout 两个应用项目就可以在 layout 应用的 about 看到 home 应用中的 User 组件的内容了。


推荐阅读:

微前端落地:Systemjs模块化解决方案

破解项目臃肿之道:微前端落地实践

不小心将 Webpack 升级后我搞定了微前端。


恭喜你又在前端道路上进步了一点点。

点个“在看”和“”吧!

浏览 45
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报