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

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

[[396348]]

本文转载自微信公众号「勾勾的前端世界  」,作者西岭。转载本文请联系勾勾的前端世界公众号。

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 组件的内容了。

 

责任编辑:武晓燕 来源: 勾勾的前端世界
相关推荐

2022-01-24 13:46:24

框架

2018-03-27 13:26:51

教程

2021-04-25 18:42:02

Serverless 文件上传用户管理

2010-06-11 09:01:02

.NET 4并行编程

2014-12-25 10:48:21

程序员代码

2012-02-06 13:15:37

IP-guard三重保信息防泄漏溢信科技

2013-01-21 13:52:47

2018-06-01 15:41:21

2023-08-16 19:14:02

微前端

2020-12-16 05:58:43

算法数据结构前端

2022-09-21 11:51:26

模块化应用

2010-10-25 10:07:48

jQuery

2010-10-27 10:02:36

PHP

2021-09-16 05:32:31

No.js 模块加载器module1.js

2013-07-15 16:28:15

iOS多线程GCD介绍Dispatch Qu

2012-09-21 15:23:27

Java项目Java开发

2011-03-14 13:51:00

iptables编译

2019-05-07 15:38:48

手机CPU大小核

2023-02-26 14:17:44

点赞
收藏

51CTO技术栈公众号