qiankun(乾坤)微前端框架简介

qiankun(乾坤)微前端框架简介

最近在搞微前端项目,接下来整体介绍一下微前端。
在现代 Web 应用程序开发中,微前端架构逐渐成为一种趋势,它可以帮助我们更好地管理和组织复杂的项目。qiankun(乾坤)是一个基于 single-spa 的微前端实现库,旨在帮助开发者更简单、无痛地构建一个生产可用的微前端架构系统。
一、qiankun 简介

qiankun(乾坤)这个名字来源于“小世界有大乾坤”,意味着在微前端这个小世界里,通过乾坤这个框架可以创造出一个宏大的架构。qiankun 的主要特点有:

简单:无论你使用什么技术栈,都可以轻松地将子应用接入到主应用中,就像使用 iframe 一样简单。
完备:qiankun 提供了丰富的功能,包括样式隔离、沙箱、预加载等,为开发者解决微前端架构中的各种问题。
生产可用:qiankun 已经在蚂蚁金服内部和外部的 200+ 应用中得到验证,是一个值得信赖的生产可用解决方案。
二、qiankun 的设计理念

qiankun 的设计理念主要体现在两个方面:技术栈无关和技术栈无关。

技术栈无关:qiankun 不限制子应用的技术栈,无论是 React、Vue 还是 Angular,都可以轻松地接入到主应用中。这样可以消除应用之间的隐性依赖,实现真正的技术栈无关。
接入简单:qiankun 的目标是让接入微前端的过程就像使用 iframe 一样简单,从而尽可能减少对旧应用的改造工作量。
三、qiankun 的技术实现与选择

qiankun 在技术实现上主要解决了两个问题:应用的加载与切换和应用的隔离与通信。

应用的加载与切换:qiankun 通过使用 single-spa,实现了应用的懒加载、路由处理和应用入口选择等功能。
应用的隔离与通信:qiankun 使用 JS 沙箱和样式隔离技术,确保子应用之间的 JS 和 CSS 不会发生冲突。同时,qiankun 提供了父子应用和子子应用之间的通信机制,实现了应用之间的数据传递和交互。
总结

qiankun(乾坤)作为一个微前端框架,为开发者提供了简单、完备且生产可用的解决方案。通过技术栈无关和接入简单的设计理念,qiankun 可以帮助开发者更好地管理和组织复杂的 Web 应用程序,实现高效的协同开发

### 关于乾坤框架 403 错误的解决方案 在使用 qiankun(乾坤)框架时,如果遇到 403 错误,通常是因为服务器端拒绝了客户端请求访问某些资源。以下是可能的原因以及对应的解决办法: #### 1. **跨域问题** 当子应用尝试加载静态资源或接口数据时,可能会因为跨域策略被阻止。这通常是由于 CORS 配置不当引起的。 - 确保后端服务器允许来自前端域名的请求。可以通过设置 `Access-Control-Allow-Origin` 头部来实现[^1]。 ```javascript // 示例:Node.js 中配置 CORS const cors = require('cors'); app.use(cors({ origin: 'http://your.frontend.domain', // 替换为实际的前端地址 })); ``` #### 2. **路径拼接错误** 如果父应用和子应用之间存在路径拼接问题,可能导致请求的目标 URL 不正确,从而引发 403 错误。 - 检查子应用的入口文件是否正确设置了基路径(base path),并确保其与父应用一致[^2]。 ```javascript // 子应用打包时需指定 base 路径 module.exports = { output: { publicPath: '/sub-app/', // 替换为实际的子应用路径 }, }; ``` #### 3. **权限控制** 部分情况下,403 可能是由服务器端的权限验证机制触发的。例如,未登录用户试图访问受保护页面。 - 如果是这种情况,请确认用户的认证状态,并调整路由逻辑以适配无权访问的情况[^3]。 #### 4. **浏览器兼容性** 虽然新版本的 qiankun 默认支持 IE 浏览器,但在特定场景下仍可能出现兼容性问题,尤其是涉及动态脚本注入的操作。 - 对于需要兼容老旧浏览器的应用程序,建议显式禁用沙箱功能。 ```javascript // 启动微应用时不启用沙盒模式 registerMicroApps([ { name: 'example', entry: '//localhost:8080', container: '#container', activeRule: '/example', sandbox: false, // 设置为 false 来关闭沙盒 } ]); ``` 通过以上措施可以有效减少甚至完全消除因上述原因造成的 403 错误现象。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Shero.李建业

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值