前言

qiankun是一个微前端的解决方案，是 single-spa的封装。因同属 umi体系，用 umi 脚手架，只需要安装@umijs/plugin-qiankun这个插件，然后做些简单配置就可以使用。这里不讨论如何使用。开发体验不错，但是 ——

遇到的问题

—— 但是，打包到生产环境却有一堆问题。所以本章主要是记录问题和解决方案。

跨域

官方解决方案

styled-components 样式覆盖

去下babel-plugin-styled-components配置文件，然后在webpack配置文件里配置namesapce

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "namespace": "my-app"
      }
    ]
  ]
}

styled-components 切换子应用后丢失

暂时无解，官方 issues；
我的应急方案

1. 把不需要交互的样式交给 css 去处理，需要交互的才用 styled-components；
2. 关闭沙盒(sandbox)：

1
2
3
4
5
6

 // 主应用 .umirc
  qiankun: {
    master: {
      sandbox: false,
      }
  }