使用qiankun微前端库的时候，子应用字体图标无法显示问题，及解决方式

最新推荐文章于 2023-12-04 11:00:00 发布
最新推荐文章于 2023-12-04 11:00:00 发布
阅读量4.3k 收藏 8
点赞数 2
分类专栏： webpack qiankun 文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jeo_blue/article/details/121178544
版权
在使用qiankun微前端框架时，遇到子应用中的Element-UI字体图标在被父应用加载后无法显示的问题。原因是webpack打包的字体图标未使用url_loader，导致引用路径错误。解决方法是配置字体图标打包为base64，确保其能正确跟随publicPath加载。
摘要由CSDN通过智能技术生成

问题：
使用qiankun微前端库的时候，加载的子应用使用了element-ui的字体图标，子应用在独立运行时，字体图标可以正常显示，而在被父应用加载时，字体图标显示不出来。

解决方式：
配置字体图标打包方式使用url_loader，打包为base64

config.module
 .rule("fonts")
  .test(/.(ttf|otf|eot|woff|woff2)$/)
  .use
最低0.47元/天 解锁文章
zyf1910
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
qiankun-angular-angularjs:基于 qiankun，主应用为 angular，子应用为angularjs
05-29
QiankunAngularAngularjs 基于qiankun,实现了在angular9主应用下挂angularjs子应用的范例。可实现angularjs和angular9优雅共存，增量迁移。本工程只是对qiankun官网样例的补充，如果想要详细了解qiankun请访问官网：https://qiankun.umijs.org/ 工程启动 在主应用与子应用下先分别完成依赖的安装 npm install 启动主应用 npm run start:main 启动 angularjs 子应用 npm run start:angularjs 启动 angular9 子应用 npm run start:angular9 运行效果 切换angular9 切换angularjs 参考资料 qiankun: https://qiankun.umijs.org/ single-spa/ecosystem/a
qiankunTestByWu:微前端解决方案qiankun测试用例，主应用及子应用替换vue-cli 3构建
03-08
node.js v12.13.0 1104，主应用采用vue-cli脚手架，重新创建新的demo目录下admin-wu主要应用microfrontend-demo主要应用sub-app1为子应用sub-app2为子应用已解决1，子应用与主应用，子应用与子应用跨域问题2，主应用...
微前端qiankun 子应用使用阿里字体图标不显示
weixin_39031037的博客
06-20 1348
微前端打包部署后，子应用的iconfont的字体图标显示报错，原因：打包后请求字体的路径是获取主应用下面的文件解决方案：将字体图标打包成base64显示
qiankun vue-cli3子应用打包，element无法显示字体和图标
blake32的博客
08-17 1313
qiankun vue-cli3子应用打包，element无法显示字体和图标
qiankun: 关于ElementUI字体图标加载不出来的问题
qq_43340606的博客
12-04 963
比如我的子应用部署在a.com/bbb，主应用部署在a.com/aaa，独立访问子应用时，字体文件的路径就是a.com/bbb/static/fonts/XXX.wofff（能找到资源），嵌入主应用后访问的路径就是a.com/aaa/static/fonts/XXX.woff（找不到资源），这个时候就会报404错误。更进一步，如果不提取css到独立文件，那么css都会被打包到js文件中，会导致文件变大。elementUI的样式文件中有字体文件的引用，是以相对路径的形式写在css文件中的，
umi qiankun 微应用打包之后 css 中的字体文件不显示或404
pingwei_deng的博客
01-06 858
umi qiankun 微应用打包之后 css 中的字体文件不显示或404 原因：字体文件的加载路径是相对地址，qiankun将外链样式改为了内联样式，css文件打包后，无法通过 publicPath 来动态的修改字体文件路径。publicPath 地址指向 前台静态资源地址。
乾坤子应用中图片和elementUI图标都无法加载
weixin_43346782的博客
02-24 977
乾坤子应用无法加载图片，以及子应用部署服务器后内外网两种访问方式图片无法加载问题
微前端架构模板--qiankun.zip
07-14
3. **状态管理**：Qiankun允许子应用使用各自的状态管理库，如Redux或Vuex，同时提供全局状态共享的解决方案，如使用Redux或Context API。 4. **懒加载与按需加载**：优化性能，只在需要时加载子应用，降低首屏加载...
micro-application:qiankun微前端，子应用pdf转图片项目
03-16
##微前端微前端框架 。包含了一个子应用： pdf转图片子应用 ＃主应用就是一个建筑物 ＃安装在三个目录下分别运行 npm i ＃开发在三个目录下分别执行 npm run dev ＃部署 先后执行 node vue-pdf-server.js node main...
qiankun-micro-app:qiankun 微前端应用实践与部署
05-14
微前端应用分为主应用与子应用，部署方式是分别编译好主应用与子应用，将主应用与子应用部署到 nginx 配置好的目录即可。 代码仓库 分别进入 portal、app1、app2 根目录，执行: 开发模式 # portal yarn yarn start ...
qiankun-demo:微前端
03-19
`qiankun`是阿里开源的一款实现微前端的优秀框架，它提供了轻量级的解决方案，使得不同技术栈的应用能够无缝地协同工作。 在`qiankun-demo`项目中，我们可以看到它是对`qiankun`框架的一个实际演示。这个项目的主要...
qiankun微前端在vue项目中的应用
05-11
qiankun微前端在vue项目中的应用
乾坤微前端基于vue的子模块开发.docx
08-19
在基于Qiankun的微前端开发中，子应用的创建和通信是非常关键的环节。本文将详细介绍如何进行子应用的搭建以及应用间通信的实现。 首先，让我们从子应用的目录结构开始。一个标准的Vue子应用通常包括以下几个部分：...
基于vue+qiankun微前端项目实战vue项目（新手学习）.zip
03-03
基于vue+qiankun微前端项目实战vue项目.zip 本项目采用 vue + qiankun 实践微前端落地。 同时 qiankun 是一个开放式微前端架构，支持当前三大前端框架甚至 jq 等其他项目无缝接入。 此项目为了尽可能的简单易上手，...
qiankun乾坤快速简单完整的微前端解决方案
08-08
【标题】：“qiankun乾坤：快速简单完整的微前端解决方案” 在当今的Web开发领域，微前端（Micro Frontend）...通过阅读和实践这些代码，可以更好地理解和掌握qiankun的用法，以及如何在实际项目中应用微前端架构。
qiankun element ui 打包图标不显示
偏执的小男孩儿
10-10 339
qiankun element 图标不显示
乾坤微服务子项目图片资源加载失败
wzp6010625的博客
04-26 1272
子项目单独运行时正常；放在乾坤上，加载图片时失败。
微前端——qiankun（乾坤）实例
aa_mmnn的博客
05-11 1191
一、什么是微前端 微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来加载这些子应用。微前端的核心在于拆，拆完后在合！ 二、为什么使用微前端 不同团队间开发同一个应用技术栈不同 希望每个团队都可以独立开发，独立部署 项目中还需要老的应用代码 我们可以将一个应用划分成若干个子应用，将子应用打包成一个个的 lib 。当路径切换 时加载不同的子应用。这样每个子应用都是独立的，技术栈也不用做限制了！从而解决了前端协同开发问题。 三、qiankun框架 **文档地址：**https://qianku
vue qiankun 主应用访问子应用 不显示也不报错
热门推荐
风间琉璃c
01-12 1万+
业务背景：原内管平台中子系统越来越多，项目越来越大，打包发布需要十几分钟，本地运行npm run dev都非常容易因为内存不够导致崩溃（虚拟桌面内存就8G），业务打算将渠道管理平台中的一个子系统独立出来，用qiankun改成微前端架构。 介绍 - qiankunhttps://qiankun.umijs.org/zh/guide 遇到的问题：从主应用访问子应用时，控制台不报错，但是页面显示空白。 之前在测试demo中成功搭建过一次，由于过了两周印象不是很深刻，打算再重新搭建一次demo，主应用和子应用
window.open微前端qiankun子应用
最新发布
07-02
`window.open` 是一个 JavaScript 函数，用于在浏览器中打开一个新的窗口或标签页，通常用于创建独立的子应用。在微前端架构中，如 Qiankun（前身为 Weex-vue-loader），它是一个支持组件化、按需加载和隔离的前端模块化方案，常用于构建大型复杂应用中的独立子应用。 Qiankun 主要关注于管理这些子应用（也称为“应用容器”或“沙箱应用”）之间的通信和协作。当你使用 `window.open` 在 Qiankun 中打开一个子应用时，实际上是： 1. **创建子应用实例**：Qiankun 在新页面上初始化并运行指定的子应用代码。 2. **通信通道**：它会设置一个跨域通信机制（如 WebSocket 或者消息传递 API），以便主应用与子应用之间交换数据和事件。 3. **生命周期管理**：子应用有自己的生命周期，比如加载、卸载等，Qiankun 可以帮助管理这些过程。 相关问题： 1. Qiankun 如何处理子应用的加载和卸载？ 2. Qiankun 的跨域通信机制是如何实现的？ 3. 在 Qiankun 中，如何从主应用向子应用发送数据或调用方法？
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值