【源码】基于Web组件的微前端基座

项目简介

本项目是基于Web组件的微前端基座，借助Web组件实现微前端应用的接入与管理。与传统微前端框架（如qiankun）不同，项目将微应用封装为自定义元素插入主应用，实现微应用的隔离性与可重用性。该基座支持多种前端框架（如React、Vue等）的微应用接入，还具备沙箱机制、样式隔离、路由管理等功能。

项目的主要特性和功能

1. 基于Web组件的微应用接入：以Web组件封装微应用为自定义元素并插入主应用，实现隔离与复用。
2. 沙箱机制：支持iframe和WithSandBox两种沙箱模式，隔离微应用与主应用执行环境，防止全局变量污染。
3. 样式隔离：通过shadow DOM和样式作用域隔离，避免微应用样式影响主应用或其他微应用。
4. 路由管理：支持search和native两种路由模式，可按需选择路由策略。
5. 生命周期管理：提供微应用挂载、卸载、更新等生命周期钩子，便于管理微应用状态。
6. keep-alive模式：支持微应用持久化挂载，减少重复加载，提升性能。
7. 预加载机制：支持微应用预加载，利用浏览器空闲时间提前加载资源，提升用户体验。

安装使用步骤

假设用户已经下载了本项目的源码文件。 1. 安装依赖：进入项目根目录，运行以下命令安装依赖： bash npm install 2. 配置微应用： - 对于React微应用，参考react-project目录的配置，确保微应用的路由和资源路径正确。 - 对于Vue微应用，参考vue-project目录的配置，确保微应用的路由和资源路径正确。 3. 启动主应用：进入substrate目录，运行以下命令启动主应用： bash npm start 4. 启动微应用：分别进入react-project和vue-project目录，运行以下命令启动微应用： bash npm start 5. 访问应用：打开浏览器，访问主应用的地址，查看微应用的加载和运行情况。

注意事项

• 确保主应用和微应用的端口配置不冲突，避免端口占用问题。
• 在微应用中，确保publicPath和路由baseUrl配置正确，避免资源加载失败。
• 在使用keep-alive模式时，注意微应用的状态管理，避免状态丢失或冲突。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】