微前端乾坤使用过程中的坑

最新推荐文章于 2025-03-23 19:04:17 发布
最新推荐文章于 2025-03-23 19:04:17 发布
阅读量4.2k 收藏 9
点赞数 3
分类专栏： 微前端 javascript qiankun 文章标签： vue javascript webpack 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/puyahua/article/details/109361258
版权
本文详细探讨了在使用微前端框架乾坤时遇到的五大问题，包括iconfont字体加载失败、DOM查询失效、组件库样式隔离、第三方JS加载不畅以及webpack-dev-server代理接口时cookie丢失。针对这些问题，作者给出了具体的解决方案，如修改字体文件位置、代理DOM查询方法、调整元素添加位置、处理第三方JS执行和调整跨域设置。这些解决方案旨在帮助开发者更好地理解和解决微前端环境中遇到的实际问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

微前端乾坤使用过程中的坑

乾坤在启动子应用的时候默认开启沙箱模式{sandbox: true}，这样的情况下，乾坤节点下会生成一个 shadow dom，shadow dom 内的样式与外部样式是没有关联的，这样就会给子应用内的样式带来一系列问题。这其中很多问题并不是乾坤造成的，而是 shadow dom 本身的特性导致的，乾坤还是不错的（不背锅）。随时补充

1.iconffont 字体在子应用无法加载

原因：shadow dom 是不支持@font-face 的，所以当引入 iconfont 的时候，尽管可以引入样式，但由于字体文件是不存在的，所以相对应的图标也无法展示。

相关链接：@font-face doesn’t work with Shadow DOM?，Icon Fonts in Shadow DOM

方案：

  1. 把字体文件放在主应用加载
  2. 使用通用的字体文件

2.dom的查询方法找不到指定的元素

原因：

最低0.47元/天 解锁文章
一个“微前端”逼走了2位90后——谈谈被后端逼走的前端
网尘的技术专栏
07-10 1042
作为团队领导者，需要经常帮助组员解决各类阻塞问题，而一直从事后端的开发，导致对前端的知识储备并没有那么丰富（实际很简陋）。而当下流行的开发模式几乎都是前后端分离的，因此组建好团队，前端、后端几乎1比1配置好像有些不太对，因此稍微倾斜了下后端，按80%配置前端。我们的新的产品，后端采用微服务，前端采用微前端，感觉是绝配啊。没想到，悲剧就此拉开序幕… 为了组建团队，需要进行多轮次的面试，遴选人才不是一个轻松的活。揣着一颗忐忑不安的心，在备足了前端的知识后，开始上岗面试了。我的一般步骤是：进入正题前，和他.
前端技术浪潮与应用
LittleRoundFace的博客
11-28 2481
2020年前端技术浪潮与应用 文章目录2020年前端技术浪潮与应用一、前端基建01.前端可视化01-1.页面可视化搭建①页面可视化背景-前端行业提效分析②业界-前端行业提效轮子：[前端可视化搭建工具业界的轮子](https://juejin.im/post/6858881797490098190)③背景-提效轮子总结归纳④智能化相关行业提效分析⑤举例可视化搭建其中的一个例子来看前端可视化——imgcookimgcook介绍-产品大图imgcook介绍-产品大图核心技术难点-智能识别表达拆解核心技术难点-智能
2021-07-27微前端ali-qiankun2.4.3体验
weixin_44715407的博客
07-30 356
参考： qiankun官网 基于qiankun的微前端实践 体验技术栈 vue2-cli4,vue3-cli4，,vue3-vite,three.js vue3-vite,2.4.3不支持子应用，支持基座（据说是摇树优化把无用配置筛掉了） 然后会提示这个错误： 前言 在开始demo之前，建议先看完vue微应用项目实践，再看入门教程。demo描述相当简单，但是实际操作才会发现有些坑在过程中。 首先一定要提前确定路由模式，是要选择hash还是history？后续的打包配置和路由跳转方式会紧密关联。其次是建议学
乾坤qiankun搭建前端微服务
qq_43692768的博客
08-19 1358
微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。
微前端qiankun框架的使用
最新发布
qq_65325528的博客
03-23 1243
样式问题，在子应用中样式是正常的，但是在主应用中，子应用的样式丢失了，而且在我还设置了strictStyleIsolation: true模式，样式还是很神奇的消失了，网上查询了好多方法，最后用审查元素查看发现子应用也正常被shadow-root包裹起来了，结果发现是子应用中，挂载元素时自己写错了，在子应用中的render函数应该这样写。这只是qiankun框架的基本使用方式，具体的方法和更多详情可以去官网查看，官网写的很清楚的，当前属于我个人的笔记，也希望通过这篇文章可以帮到同行的朋友。
微前端框架——乾坤入门
weixin_41484284的博客
12-29 4305
介绍乾坤的概念和背景乾坤（qiankun）是一款成熟的微前端框架，由蚂蚁金服推出。它基于single-spa进行二次开发，旨在帮助开发者更简单、无痛地构建一个生产可用的微前端架构系统。它支持在一个主应用中加载和运行多个子应用，每个子应用都是一个独立的单页面应用（SPA）。我们先来了解一下什么是微前端。微前端是一种前端架构风格，它将一个大型应用拆分成多个更小、更易维护的子应用，这些子应用可以独立开发、部署和运行。每个子应用是独立的可以自由选择技术栈独立部署和升级在浏览器中集成。
【前端知识】微前端框架qiankun
wendao76的专栏
12-10 5742
Qiankun是一款由蚂蚁金服推出的微前端框架，它基于single-spa进行二次开发，旨在将Web应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。Qiankun是一款功能强大的微前端框架，它通过将大型前端应用拆分为多个小型应用，提高了开发效率和可维护性。同时，Qiankun提供了沙箱机制，确保了微应用之间的隔离性。然而，Qiankun也存在一些局限性，如不支持多实例场景、对Vite等构建工具的支持不够友好等。因此，在选择是否使用Qiankun时，需要根据具体项目的需求和团队的技术栈进行综合考虑。
qiankun使用文档
qq_42556623的博客
05-13 3109
基于vue的主应用+vue微应用+react微应用 一、qiankun主应用（vue） 1.安装 qiankun $ yarn add qiankun # 或者 npm i qiankun -S 2.注册微应用并启动（参考官方文档） import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import { registerMicroApps, start } from "qiankun"; Vue
微前端框架qiankun剖析
浮游的博客
04-19 3073
作为目前微前端领域首屈一指的框架，qiankun无论是从接入的方便程度还是从框架本身提供的易用性来说都是可圈可点的。qiankun基于single-spa进行了二次开发，不但为用户提供了简便的接入方式（包括减少侵入性，易于老项目的改造），还贴心的提供了沙箱隔离以及实现了基于发布订阅模式的应用间通信方式，大大降低了微前端的准入门槛，对于微前端工程化的推动作用是不可忽视的。
基于 qiankun 的微前端实践
小王的技术库
08-31 1004
首先基于作者自己的思考，给大家梳理下 qiankun 微前端的渲染流程，方便不了解微前端的同学有个大体的认识。假如你不了解微前端的话，对于这个新事物的学习和探索，一般是按照 5Ws 的学习规律来学习：本文也按照类似的方式一个具体的案例去梳理 qiankun 的核心概念。本文有一个业务系统 A，希望集成业务系统 B 的_欢迎卡片配置_功能页面。那么 who 包含 qiankun 客户端、主应用 A、微应用 B 三部分，三者协作完成了微前端的设计。...
微前端qiankun的实际应用
程序媛的梦工厂
11-30 2551
全网最全微前端知识点总结
关于qiankun的使用与部署过程，全详细记录
我的Object Lift
12-22 7278
1.安装qiankun qiankun的官网qiankun - qiankun 安装过程 $ yarn add qiankun # or npm i qiankun -S 主应用安装，子应用不需要安装； 2.主应用qiankun配置内容； vue -template -admin作为本次记录的主体； 新建micro.js 在一下代码段中，将按照qiankun的配置模式，为主应用配置加载的主应用内容； /** * qiankun 模式 * 子系统构建主控文件 ...
vue微前端qiankun框架学习到项目实战,基座登录动态菜单及权限控制
前端开发工程师
09-22 7651
技术无关，独立开发，独立部署，增量升级，独立运行，微前端的核心目标是将巨石应用拆解成若干可以自治的松耦合微应用。
qiankun本地启动时子应用为啥去父应用查找字体
weixin_43585402的博客
06-15 134
本地开发时，关闭了样式隔离，切换到子应用为什么iconfont会查找父应用的文件。
如何在前端项目中使用icon图标 （iconfont和remixicon以及Materialicon）
haodanzj的博客
06-20 2960
使用图标库的教程
qiankun子应用学习
qq_25496415的博客
10-13 710
qiankun子应用接入文档说明 文章目录qiankun子应用接入文档说明主应用注册展示子应用路由注册更改配置微应用的打包工具注意事项1、子应用路由必须挂载前缀；2、路由是以著应用为主，所以路由传参可以直接使用；3、vuex、cookie是共享主应用的，子应用中可以直接使用；4、虚拟节点的获取5、弹框挂载的时候需要对节点挂载的对象切换成虚拟节点内才能更改样式6、当前平台使用的适配方案是根据根节点的字体大小进行适配，根节点字体在1440下是16px,在其他尺寸的时候是14px,子应用需要统一适配方案，否则就考
qiankun（乾坤）微前端框架简介
偏执的小男孩儿
12-21 8914
qiankun（乾坤）微前端框架简介
乾坤（qiankun）的使用
subsistent的博客
09-08 579
qiankun 是一个基于single-spa的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。微前端架构具备以下几个核心价值：技术栈无关主框架不限制接入应用的技术栈，微应用具备完全自主权独立开发、独立部署微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新增量升级。
微前端（乾坤）使用的时候遇到的问题
02-25
### 微前端 Qiankun 使用常见问题及解决方法 #### 子应用中的资源加载问题 当子应用作为独立应用程序运行时一切正常，但在被父应用加载时出现问题。例如，在使用 `iconfont` 图标的场景下，如果子应用在独立环境中能够正确展示图标，而通过 qiankun 加载到主应用中却无法显示，则可能是由于相对路径配置不当造成的。为了确保公共资源能被正确访问，建议采用绝对路径来引入这些资源文件[^2]。 对于上述情况的一个具体解决方案是在构建工具（如 Webpack）配置中设置公共路径 (`publicPath`) 为相对于根目录的 URL 或者使用 CDN 链接直接引用外部资源。这样无论是在开发环境还是生产环境下都能保证静态资源的有效加载。 ```javascript // webpack.config.js 中的部分配置项 module.exports = { output: { publicPath: '/', // 设置为'/'表示所有资源都从根路径开始计算 }, }; ``` #### 跨域资源共享 (CORS) 另一个常见的问题是跨域请求失败。这通常发生在微服务架构下的不同域名之间互相调用 API 接口时。要解决这个问题，可以在服务器端开启 CORS 支持，允许来自特定源站的 HTTP 请求；也可以考虑部署反向代理服务器统一处理前后端之间的通信。 #### 生命周期钩子函数执行顺序混乱 有时开发者会发现某些预期的行为并没有按照设想那样发生，尤其是在涉及到多个子应用间的交互逻辑时。这是因为各个模块间可能存在依赖关系，但默认情况下它们会被并行初始化。为了避免这种情况的发生，应该合理利用 qiankun 提供的应用生命周期事件来进行必要的同步控制[^1]。 - `beforeLoad`: 在加载任何远程入口之前触发； - `mounted`: 当组件挂载完成之后立即调用； - `bootstrap`: 应用启动阶段最先被执行的方法之一； - `unmount`: 卸载当前实例前调用此回调清理工作。 了解以上几个重要时刻点有助于更好地管理各部分代码片段以及优化用户体验流程。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值