Antd Pro项目接入qiankun微前端
在开始之前，请先提前了解微前端相关概念
场景:
antd pro项目中接入qiankun，抽离其中某个模块作为子应用
一、项目技术
- Ant Design Pro
- UmiJS
- webpack
- ts
其他用到的根据实际情况而定
二、@umijs/plugin-qiankun
在开始做的时候先去了解了一些开源的微前端插件，最后决定使用阿里的qiankun，正好umi里面内置了一个qiankun的插件
如果使用 antdpro+umi+qiankun的架构做微前端，那就直接去看umi的官方文档，了解相关配置
三、主应用配置
项目配置之前先浏览一遍官方的配置案例，下面说的的内容仅是我在项目中使用到的
1、安装依赖
yarn add @umijs/plugin-qiankun -D
2、注册子应用
// 根目录config文件夹下的config.ts
// 在导出的defineConfig里面添加qiankun: {master: { {name: 'app1', // 唯一 identry: '//localhost:9001', // html entryprops: {}, // 传递子应用的参数},},},
- 如果有多个子应用，就在master下面注册多个
- 可以在根目录下面新建.env文件来指定启动端口
PORT=9001
3、添加访问子应用的路由
主应用配置一个菜单路由，内容是访问子应用的具体页面的路由
{path: '/project/development/index',name: 'dataDevelopment',microApp: 'app1', // 和上面注册子应用的唯一id对应起来},
4、修改主应用中document.ejs文件中的根id，防止跳转子应用一直处于页面加载状态
<div id="root">// id修改为动态的
<div id="<%= context.config.mountElementId %>">
// 在根目录下config/config.ts中加一个mountElementId属性和值
四、子应用配置
1、安装依赖
yarn add @umijs/plugin-qiankun -D
2、注册插件
// 根目录config文件夹下的config.ts
// 在导出的defineConfig里面添加qiankun: {slave: {},},base: '/', // 这个如果不加的话，页面路由会自动拼上子应用package.json中name的内容
3、 配置运行时生命周期钩子
// 根目录下app.ts中导出export const qiankun = {// 应用加载之前async bootstrap(props) {console.log('app1 bootstrap', props);},// 应用 render 之前触发async mount(props) {console.log('app1 mount', props);},// 应用卸载之后触发async unmount(props) {console.log('app1 unmount', props);},
};
4、路由存在
保证子应用路由里面存在主应用里面注册的地址
五、父子应用传值通信
1、配合 useModel 使用（推荐）
需确保已安装 @umijs/plugin-model 或 @umijs/preset-react
- 主应用中
在src/app.ts里导出一个 useQiankunStateForSlave函数，函数的返回值将作为 props 传递给微应用
// src/app.ts
// qiankun传递给子应用的参数
export function useQiankunStateForSlave() {const [masterState, setMasterState] = useState({});return {masterState,setMasterState,};
}
- 子应用中
子应用中会自动生成一个全局 model，可以在任意组件中获取主应用透传的 props 的值。
2、基于props传递
这种方式主要是在主应用中注册子应用的时候，同步加一个props的属性，上面注册子应用的时候我代码里面我已经提到了
子应用直接在app.ts中配置的生命周期钩子中获取 props 消费数据（参考上面子应用的配置）
3、组件共享
- 关于组件共享可以考虑npm包 的形式来解决
- 搭建npm私有服务器
- 组件库搭建
4、使用qiankun官网提供的Actions通信
看另一篇actions通信补充
六、线上主应用访问子应用跨域
通过nginx配置允许子应用被访问的域名
- 以抽离出来的模块为例
- 在nginx里面添加
# 配置允许被xxxxx.com跨域访问add_header Access-Control-Allow-Origin xxxxx.com; Antd Pro项目接入qiankun微前端相关推荐
- vue项目集成乾坤(qiankun)微前端
vue项目集成qiankun微前端 集成乾坤微前端主应用: 1.安装 2.main.js中进行配置 3.配置路由 4.将主应用路由模式设置为history模式 子应用中配置(子应用无需安装乾坤) 1. ...
- Error: Module “xxx“ does not exist in container. / antd pro v5启用qiankun报错 / 同时使用mfsu和qiankun报错
一.问题描述 我们用antd pro v5搭建前端项目,启用qiankun微前端模式,终端报错如下: Uncaught (in promise) Error: Module "xxx&quo ...
- qiankun微前端落地实践
qiankun微前端落地实践 背景 A项目集成了多条业务线的项目,但是共同使用一个git仓库和一套发布流水线,代码组织比较混乱.本次需要引入一个新的业务线,如果直接在A项目开发,将导致原项目更加复杂, ...
- qiankun微前端学习
微前端学习(qiankun.singleSpa) 一.微前端的优势 什么是微前端 微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略 几个核心价值:技术栈无关 ...
- qiankun微前端实践
qiankun微前端方案实践 qiankun 微前端方案实践 创建qiankun主项目 引入react-app-rewired 配置多环境 配置proxy 创建react子项目 创建vue子项目 个人 ...
- react + antd pro 项目搭建及发布流程
#antd Pro 项目环境搭建 ##一.搭建项目 参考网址:https://pro.ant.design/docs/deploy-cn ###1.安装 从 GitHub 仓库中直接安装最新的脚手架代 ...
- qiankun微前端：script xxxxxx replaced by qiankun或script xxxxxxxxxx replaced by import-html-entry
qiankun微前端 1.问题:script xxxxxx replaced by qiankun或script xxxxxxxxxx replaced by import-html-entry 2. ...
- qiankun 传统项目配置_微前端 qiankun 项目实践
原标题:微前端 qiankun 项目实践 作者:zxh1307 https://juejin.im/post/5ea55417e51d4546e347fda9 导语 最近在做微前端的项目 , 过程中真 ...
- qiankun 微前端_看滴普大前端是如何玩转基于“qiankun”（乾坤）的微前端架构的...
前言 「微前端」可以算是 2019年前端技术领域中最热门的话题.各个大厂也纷纷贡献出了自己的解决方案和实践分享.滴普科技作为一家致力于为企业提供数字化转型服务的技术公司,前端也需要灵活聚合,快速复用, ...
最新文章
- 上线前一个小时，dubbo这个问题可把我折腾惨了
- “人工智能治理公共服务平台”在2020年中关村论坛发布
- 读书笔记之《淘宝技术这十年》
- 3月第一周几个要处理的问题
- 华为备忘录导入印记云笔记_原来华为手机自带会议神器，开会不用手写，这个功能就能搞定...
- SpringMVC学习10之AJAX初体验和了解
- 遇到填报无计可施？一文讲透自由表填报，数据分析效率直线提升
- netty系列之:自定义编码解码器
- 菜鸟修炼C语言小设计之——工资统计
- mysql dmz_MySQL 中LIMIT的使用详解
- android seekbar闪退,android seekbar 踩坑之路
- Hive SQL 分析函数
- mybatis中使用SqlSessionManager进行insert操作
- HDU2501 Tiling_easy version【递推+打表】
- Activiti接受任务（receiveTask）
- 推荐一个商业级saas开源小程序电商java项目
- lopatkin俄大神精简中文系统 Windows 10 Pro 10240.16393.150717-1719.th1_st1 x86-x64 CN Tablet PC FINAL...
- Python培训班多少钱
- 如何提高项目交付效率
- opera mini android apk,Download Opera Mini APK Android