qiankun常见的坑有哪些

Qiankun 是一个微前端框架，用于构建具有多个独立前端应用的大型项目。在使用 Qiankun 过程中，可能会遇到一些常见的坑，下面是一些可能的问题和解决方案：
关于vue2和vue3使用的实际案例可以参考我之前的文章：
vue3+vite+qiankun搭建微应用前端框架:
https://blog.csdn.net/qq_37759901/article/details/130600473
vue2.x+qiankun微前端使用说明:
https://blog.csdn.net/qq_37759901/article/details/130600729

1. CSS 命名冲突：

问题： 不同子应用使用相同的 CSS 类名可能导致样式冲突。
解决方案： 在子应用中使用模块化的 CSS，或者使用命名空间避免全局样式冲突。
qiankun 是一个流行的微前端框架，用于管理多个子应用在同一个主应用下的加载和运行。为了防止不同子应用之间的样式冲突，可以采取以下几种策略：

1. CSS 命名空间：

   • 为各个子应用添加独特的 CSS 前缀，比如针对不同的子应用，将所有的 CSS 类名加上对应的前缀，如 .subapp1-xxx、.subapp2-xxx。

2. CSS Modules：

   • 如果子应用使用了支持 CSS Modules 的构建工具（如 Webpack），则可以通过 CSS Modules 自动为类名添加哈希值，使得类名在每个子应用内保持唯一，不会影响到其他子应用。

3. 作用域提升（Shadow DOM 或 Emulated Shadow DOM）：

   • 尽管原生 Shadow DOM 不一定是 qiankun 默认支持的方式，但可以通过 BEM 等命名规范模拟类似的作用域，在编写 CSS 时遵循模块化原则，使样式只作用于特定的组件或应用上下文中。

4. 样式隔离：

   • 使用 CSS-in-JS 解决方案，如 styled-components 或 emotion-js，它们通过生成唯一的类名来达到样式隔离的目的。
   • 对于 Less/Sass 等预处理器，可以通过配置选项（如 modifyVars）改变变量前缀，确保不同子应用使用的主题和其他变量不会互相覆盖。

5. 封装全局样式：

   • 确保子应用的样式仅在其自己的 DOM 树范围内生效，避免编写全局样式，或者使用特殊的类名层级结构包裹子应用的所有元素，例如使用独立的根级类名（如
     .micro-app）包裹子应用的内容。

6. PostCSS 插件：

   • 使用 PostCSS 进行样式处理，结合相关插件如 postcss-prefixer，可以自动给子应用的样式添加前缀。

7. Webpack 配置：

   • 对每个子应用的样式资源进行单独打包，并在加载时根据子应用的上下文动态插入带有对应作用域标识的样式表。

综合运用上述策略，可以在 qiankun 环境下有效避免不同子应用之间的样式冲突问题。同时，qiankun
提倡每个子应用应当具备良好的封装性和独立性，尽可能减少对外部环境的影响。

2.跨域问题：

问题： 如果子应用和主应用部署在不同的域名下，可能会遇到跨域问题。
解决方案： 在子应用的配置中设置 fetch 函数，确保子应用能够正确处理跨域请求。
3.子应用单独运行问题：

问题： 在开发阶段，子应用独立运行时可能会遇到问题，例如路由、状态管理等。
解决方案： 确保子应用的路由和状态管理配置正确，并在子应用中添加适当的兼容性处理。
4.子应用切换时的状态共享问题：

问题： 子应用切换时，状态（如用户登录状态）的共享和同步。
解决方案： 使用 Qiankun 提供的 emitLifeCycles 方法，可以在子应用之间进行状态共享和同步。
5.资源加载问题：

问题： 子应用加载时可能存在资源加载的问题，例如静态文件路径错误。
解决方案： 在子应用中配置正确的 publicPath，确保静态资源能够正确加载。
6.微前端框架版本兼容性：

问题： Qiankun 与某些特定版本的微前端框架（如 Vue、React）可能存在兼容性问题。
解决方案： 查阅 Qiankun 的官方文档，了解与不同版本框架的兼容性信息，确保使用匹配的版本。
与vite兼容问题，vue2跟vite同时用会沙箱隔离，vue3与新版本用就不会
7.子应用间通信问题：

问题： 子应用之间的通信，例如事件触发和监听。
解决方案： 使用 Qiankun 提供的 FrameworkConfiguration 中的 event 配置，支持子应用之间的事件通信。

在 qiankun 微前端框架中，子应用之间以及主应用与子应用之间进行数据通信主要通过以下几种方式：

1. 生命周期钩子：

   • 子应用可以通过 qiankun 提供的生命周期钩子函数向主应用传递信息，主应用也可以在这些钩子函数中接收和处理来自子应用的数据。例如，子应用在 props
     生命周期钩子中设置数据，主应用在注册子应用时获取这些属性。

bootstrap() {} export async function mount(props) {
// 设置并使用从主应用传递过来的 props
console.log(props); } export async function unmount() {}

// 主应用中注入 props const subApp = new MicroApp({
name: ‘subAppName’,
entry: ‘//your-subapp-url’,
container: ‘#subapp-root’,
props: { someData: ‘from main app’ }, // 向子应用传递数据 }); ```

2. 事件总线：

   • 可以创建一个全局事件中心（Event Bus），让主应用和子应用通过发布/订阅模式实现消息传递。
   • 例如，通过 pubsub-js、 mitt 或者自定义事件机制实现跨应用间的通信。

3. 共享存储：

   • 利用浏览器的 LocalStorage 或 SessionStorage，或者借助第三方状态库如 Redux、MobX 等，在主应用和子应用间共享可序列化的数据。
   • 当然，这种方式需要保证各应用对同一存储空间的操作是协调一致的，且考虑到安全性和隐私控制。

4. API 调用：

   • 如果主应用提供了统一的 API 接口，子应用可以直接通过 HTTP 请求等方式调用主应用提供的接口进行数据交互。

5. Context API：

   • 在 React 中，可以利用 Context API 创建一个跨越主应用和子应用边界的共享状态容器，不过这需要主应用和子应用都基于 React 构建，并且子应用能够访问到这个共享 Context。

总结来说，qiankun 并没有直接提供子应用间共享数据的功能，而是通过 JavaScript
的各种通信手段来实现数据交互。开发者可以根据实际项目需求选择合适的通信方式。

8.样式隔离问题：

问题： Qiankun 默认提供了样式隔离，但在某些场景可能不够理想。
解决方案： 针对性地使用 Qiankun 提供的 cssIsolation 配置，或者在子应用中使用一些样式隔离的工具。
9.不同子应用使用相同的依赖版本问题：

问题： 不同子应用使用相同依赖的不同版本可能导致冲突。
解决方案： 在主应用的 package.json 中配置 @qiankun/micro 的 forceRoot，以确保所有子应用共享依赖。
10.独立应用的打包优化问题：

问题： 子应用单独运行时，打包体积可能过大。
解决方案： 在子应用的构建配置中，根据需要进行代码拆分和优化，减小独立应用的体积。
这些都是一些在使用 Qiankun 过程中可能遇到的常见问题，根据具体场景和需求选择相应的解决方案。及时查阅官方文档和社区讨论也是解决问题的有效途径。