qiankun报错调试小技巧

最新推荐文章于 2024-11-29 19:02:06 发布
最新推荐文章于 2024-11-29 19:02:06 发布
阅读量1.2k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： qiankun
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cs23405/article/details/122595194
本文介绍如何在遇到难以理解的错误时调试single-spa应用。通过修改node_modules中single-spa的package.json文件来使用未压缩的开发版本，便于进行代码级调试。

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

有时候single-spa可能会报一些我们现在无法理解的错误，我们可能需要去做代码调试，阅读源码时碰到不理解的地方也需要编写示例 + 单步调试，但是默认的是已经打包压缩后的代码，不太方便做这些，大家可以在node_modules目录找到single-spa目录，把目录下的package.json中的module字段的值改为lib/single-spa.dev.js，这是一个未压缩的bundle，利于代码的阅读的调试，当然需要重启应用。
=======================================
single-spa源码解读：
https://blog.youkuaiyun.com/xgangzai/article/details/108439538

vue2/3 - 微前端qiankun报错Error in event handler for “updatePopper“: “TypeError: Failed to execute ‘get‘“
高级前端工程师
07-17 2582
vue2，vue3，nuxt.js，qiankun，微前端，乾坤，vue 微前端，vue qiankun报错，Error in event handler for "updatePopper": "TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'."，主应用的appendChid也会被重写了，这个咋办，关闭沙箱，详细解决办法，还是不行，关闭了，升级，更新，依旧报错
angular18使用qiankun搭建微服务
qq_45915779的博客
08-27 1207
在angular18版本中使用微服务。
无星的微前端之旅（四）——qiankun线上服务代理到本地
最新发布
kelai_6792的博客
11-29 664
这个方式其实是我在上家公司的时候体验过，觉得确实很有意思。所以这里来逆推一下实现方式。
微前端框架qiankun项目实战（一）--本地开发篇
azl397985856的专栏
06-09 2336
❝作者：黑化程序员https://juejin.cn/post/6970310177517993998❞大家好，我是小黑。公司使用技术栈是vue，最近遇到了一个需求，要把原有后台管理系统的...
微前端qiankun从搭建到部署的实践 (转载)
全栈小菜鸟
08-06 1635
最近负责的新项目用到了qiankun，写篇文章分享下实战中遇到的一些问题和思考。 示例代码： github.com/fengxianqi/…。 在线demo：qiankun.fengxianqi.com/ 单独访问在线子应用： subapp/sub-vuesubapp/sub-react 为什么要用qiankun 项目有个功能需求是需要内嵌公司内部的一个现有工具，该工具是独立部署的且是用React写的，而我们的项目主要技术选型是vue，因此需要考虑嵌入页...
使用 qiankun 集成应用时，出现的部分错误及解决方案
热门推荐
Lyrelion的博客
08-31 3万+
使用 qiankun 集成应用时，出现的部分错误及解决方案
前端微服务qiankun入门实践
zxl1990_ok的博客
09-29 825
qiankun 微服务
qiankun使用的小demo
04-25
vue主应用与vue子应用react子应用 1. vue子应用vue-cli3.0版本；...2.react子应用run运行报错的话package.json文件"react-app-rewired": "^1.6.2",版本在1.6.2； "react-scripts": "2.0.3",版本在2.0.3
qiankun demo
11-22
【标题】"qiankun demo" 是一个关于前端微服务框架qiankun的示例项目，旨在演示如何在实际开发中应用该框架。qiankun是阿里开源的一款基于单页应用（SPA）的微前端解决方案，它允许开发者将多个独立的SPA组织成一个...
各种前端技术seeds项目：vue、midway、qiankun、微信小程序、抖音小程序
02-25
使用monorepo实践&管理各种前端技术seeds项目：vue、midway、qiankun、lerna、reactnative&expo、electron、微信小程序、抖音小程序、tensorflow&ml5&ai.zip
基于qiankun+vue-elment-admin打造微服务使用说明v.1.01
08-03
【基于 qiankun+vue-element-admin 打造微服务使用说明 v.1.01】 在当前数字化时代，微服务架构已经成为企业级应用开发的重要趋势。本文将详细介绍如何利用 qiankun 和 vue-element-admin 结合，构建一个高效的...
微前端，在vite项目中使用乾坤qiankun
zmh_984983444的博客
11-23 1308
在主应用http://localhost:3000中就能访问子应用http://localhost:3001的内容了。// window.__POWERED_BY_QIANKUN__ 判断是否为乾坤环境。vue_3002 子应用也是同样的配置。点击左边菜单，右边显示对应的网址。'子应用的 bootstrap'主应用，用于访问子应用的入口。
微前端之qiankun的使用
知所云
11-29 2277
微前端之qiankun的使用 在之前的文章中谈到了single-spa的使用，为了多了解微前端的各类架构，在新的项目中使用了qiankun，接下来就说一说qiankun的使用 安装 1、使用vue cli 快速创建门户和子1、子2 2、门户应用 npm install single-spa --save -d 3、子1和子2分别安装npm install single-spa-vue --save -d ...
基于single-spa的微前端项目
qq_42123928的博客
05-01 1196
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、微前端是什么？主要技术二、使用步骤1.父应用2.子应用总结 前言 项目需求：几个组共用一个入口【父应用】，详细内容【子应用】各组自行维护、打包，这就可以采用：微前端 这个技术。 提示：以下是本篇文章正文内容，下面案例可供参考 一、微前端是什么？ 其他人说得太多了我就不再赘述。我这里主要讲自己项目运用的微前端：基于single-spa的微前端项目。 主要技术 single-spa：连接主项目与子应用的桥梁 systemjs
Uncaught (in promise) Error: The message port closed before a response was received.
qq_45383769的博客
12-15 1830
Uncaught (in promise) Error: The message port closed before a response was received. app.js:231 Uncaught TypeError: Cannot read properties of undefined (reading 'prototype') at eval (types.js?b3e9:39:1) at Object../node_modules/_element-ui@2.15.12@
微前端解决方案 - qiankun 2.0
u010227042的博客
02-25 2558
Announcing qiankun@2.0 2019 年 6 月，微前端框架qiankun正式发布了 1.0 版本，在这一年不到的时间内，我们收获了 4k+ star，收获了来自 single-spa 官方团队的问候，支撑了阿里 200+ 线上应用，也成为社区许多团队选用的微前端解决方案。 在今天，qiankun 将正式发布 2.0 版本。 qiankun@2.0 带来了一些新能力的同时，只做了很小的 API 调整，1.x 的用户可以很轻松的迁移到 2.x 版本，详细信息见下方 升级指南 小节。..
微前端——qiankun配置方法
xiaoququ的博客
05-30 4841
微前端是指存在于浏览器中的微服务，其借鉴了微服务的架构理念，将微服务的概念扩展到了前端。如果对微服务的概念比较陌生的话，可以简单的理解为微前端就是将一个大型的前端应用拆分成多个模块，每个微前端模块可以由不同的团队进行管理，并可以自主选择框架，并且有自己的仓库，可以独立部署上线。一般呢，微前端多应用于企业中的中后台项目中，因为企业内部的中后台项目存活时间都比较长，动辄三五年或者更多，最后演变成一个巨石应用的概率往往高于其他类型的web应用。这就带来了技术栈落后编译部署慢两个问题。
微前端应用(qiankun+umi+antd)
zh0623的博客
05-11 4029
微前端是一种前端架构模式，它将前端应用程序拆分成多个小型的、独立开发、独立部署的子应用，然后将这些子应用组合成一个大型的、复杂的前端应用。每个子应用都有自己的技术栈、独立的代码库、独立的开发、测试和部署流程，并且可以独立运行、测试和部署。微前端的目的是解决大型前端应用程序在开发、测试和部署等方面的复杂性和困难。通过将前端应用程序拆分成多个独立的子应用，可以实现团队的分工协作、提高开发效率、降低代码耦合性、提高代码可维护性和可测试性。
微前端（single-spa和qiankun）
麦子
11-30 2552
一、概念性东西： 2018年single-spa诞生了，single-spa是一个用于前端微服务化的js前端解决方案（本身没有处理样式隔离，js执行隔离），实现了路由劫持和应用加载 2019年qiankun基于single-spa，提供了更加开箱即用的API（single-spa + sandbox + import-html-entry）做到了与技术栈无关、并且接入简单 总结：子应用可以独立构建，运行时动态加载，主子应用完全解耦，与技术栈无关，靠的是协议接入，子应用必须导出bootstrap、mou
qiankun el-date-pickerpopper.js报错
05-29
看起来你的问题与前端微服务框架 qiankun 以及 ElementUI 的日期选择器组件有关。el-date-pickerpopper.js 是 ElementUI 内部使用的一个弹出层组件，用于显示日期选择器。 可能的原因之一是，当你在 qiankun 环境中使用 ElementUI 的日期选择器组件时，el-date-pickerpopper.js 文件可能无法正确加载或解析。这可能是由于 qiankun 的沙箱机制导致的，它会对组件的运行环境进行限制。 为了解决这个问题，你可以尝试将 ElementUI 的日期选择器组件单独打包，然后在主应用程序和子应用程序中都引用该组件。这样可以确保 el-date-pickerpopper.js 文件正确加载，并且可以在沙箱环境中正常运行。 另外，你也可以尝试在 qiankun 框架中使用其他日期选择器组件，例如 ant-design 的 DatePicker 组件，该组件不依赖于 ElementUI，可以避免此类问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值