1、关于qiankun的使用,可通过文档介绍 - qiankun (umijs.org)查看配置
2、以下为采用react的方式创建的一个主应用和两个子应用
(1)主应用
主应用的index.js
主应用的app.js
- name: 微应用名称
- entry: 配置为字符串时,表示微应用的访问地址
- activeRule: 微应用的激活规则,直接跟 url 中的路径部分做前缀匹配,匹配成功表明当前应用会被激活。在浏览器 url 发生变化会调用 activeRule 里的规则
- props:主应用要传递给微应用的数据
- container:微应用的容器节点的选择器,即要把微应用挂载到主应用的哪个dom节点下
主应用的界面
设置环境(子应用同理)
(2)子应用
新增public-path.js文件,用于修改运行时的publicPath
子应用的index.js()
下载react-app-rewired并复写文件webpack的配置,添加文件config-overrides.js
上述webpack设置中如果使用jsonpFunction会报错:
官网解释:在 webpack 4 中,多个 webpack 运行时可能会在同一个 HTML 页面上发生冲突,因为它们使用同一个全局变量进行代码块加载。为了解决这个问题,需要为
output.jsonpFunction 配置提供一个自定义的名称。而Webpack 5 会从 package.json name 中自动推断出一个唯一的构建名称,并将其作为 output.uniqueName 的默认值。这个值用于使所有潜在的冲突的全局变量成为唯一
子应用的界面
当在主应用中改变url,则显示对应的子应用