微前端:qiankun的设置

293 阅读1分钟

1、关于qiankun的使用,可通过文档介绍 - qiankun (umijs.org)查看配置

2、以下为采用react的方式创建的一个主应用和两个子应用 image.png

(1)主应用

主应用的index.js

image.png

主应用的app.js

image.png

  • name: 微应用名称
  • entry: 配置为字符串时,表示微应用的访问地址
  • activeRule: 微应用的激活规则,直接跟 url 中的路径部分做前缀匹配,匹配成功表明当前应用会被激活。在浏览器 url 发生变化会调用 activeRule 里的规则
  • props:主应用要传递给微应用的数据
  • container:微应用的容器节点的选择器,即要把微应用挂载到主应用的哪个dom节点下

主应用的界面 image.png

设置环境(子应用同理)

image.png

(2)子应用

新增public-path.js文件,用于修改运行时的publicPath image.png

子应用的index.js() image.png

下载react-app-rewired并复写文件webpack的配置,添加文件config-overrides.js image.png 上述webpack设置中如果使用jsonpFunction会报错:

image.png 官网解释:在 webpack 4 中,多个 webpack 运行时可能会在同一个 HTML 页面上发生冲突,因为它们使用同一个全局变量进行代码块加载。为了解决这个问题,需要为 output.jsonpFunction 配置提供一个自定义的名称。而Webpack 5 会从 package.json name 中自动推断出一个唯一的构建名称,并将其作为 output.uniqueName 的默认值。这个值用于使所有潜在的冲突的全局变量成为唯一

image.png

子应用的界面 image.png

当在主应用中改变url,则显示对应的子应用

image.png