使用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
    评论
专栏目录
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 两种集成微应用的方法（基于路由配置微应用、手动加载微应用）
Lyrelion的博客
08-22 1万+
qiankun 两种集成微应用的方法（基于路由配置微应用、手动加载微应用）
vue qiankun 主应用访问子应用 不显示也不报错
风间琉璃c
01-12 1万+
业务背景：原内管平台中子系统越来越多，项目越来越大，打包发布需要十几分钟，本地运行npm run dev都非常容易因为内存不够导致崩溃（虚拟桌面内存就8G），业务打算将渠道管理平台中的一个子系统独立出来，用qiankun改成微前端架构。 介绍 - qiankunhttps://qiankun.umijs.org/zh/guide 遇到的问题：从主应用访问子应用时，控制台不报错，但是页面显示空白。 之前在测试demo中成功搭建过一次，由于过了两周印象不是很深刻，打算再重新搭建一次demo，主应用和子应用
Vue项目引入自定义字体
DIWUCH的博客
05-10 1953
vue引入自定义字体的具体操作
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文件中的，
微前端架构模板--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 微前端应用实践与部署（四）
我爱盐酥鸡
09-14 855
一般情况下，我们对应用进行配置打包，要对图片字体等资源进行下面配置，使得资源路径正常加载。但是，在微前端模式下，子应用打包部署后，往往会出现子应用 css 文件里面引入资源路径加载失败的问题，下面就让我们来探究一下。 ???? 独立应用下的 url-loader 配置： // vue-cli 2 写法 module: { rules: [ { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: "url-loader",
element-ui 字体文件fonts/element-icons.ttf | fonts/element-icons.woff 加载报404 异常排查
热门推荐
ActionPig 的 Js
09-15 2万+
另外牵涉到 assetsSubDirectory 和 assetsPublicPath 配置以及module rules 中的loader配置 /.(woff2?|eot|ttf|otf)(?.*)?$/
解决阿里qiankun微应用资源无法加载
洲上牧童
07-05 1934
公司老项目多了，却想用新版本的框架，最好的解决办法就是用微前端。本文说下我们在用阿里微前端框架qiankun，遇到的一些问题，以及一些巧妙的解决办法。
vue.config.js的全部配置
大乌鸦
07-17 3473
【代码】vue.config.js的全部配置。
在vue项目上使用阿里qiankun ——项目部署篇（三）
前端李小白的博客
08-08 1450
qiankun官方文档部署教程 官方文档写的也挺详细的，这里我主要以统一身份认证与盐田综管部署举例说明，我部署的服务器地址http://192.168.8.27:8077 首先要注意的是，我们主应用和子应用都是使用history模式，路由记得设置base，vue.config.js也要记得设置publicPath。 引用文档的原话： 部署之后注意三点： 1、activeRule不能和微应用的真实访问路径一样，否则在主应用页面刷新会直接变成微应用页面。 2、微应用的真实访问路径就是微应用的entry，entr
乾坤微服务子项目图片资源加载失败
wzp6010625的博客
04-26 1272
子项目单独运行时正常；放在乾坤上，加载图片时失败。
qiankun element ui 打包图标不显示
偏执的小男孩儿
10-10 340
qiankun element 图标不显示
微前端四：qiankun在开发中遇到的问题
weixin_44384273的博客
10-18 2455
1、图片路径不对； 2、vue2.0 + element ui 和 vue3.0 + element plus样式冲突；
window.open微前端qiankun子应用
最新发布
07-02
在微前端架构中，如 Qiankun（前身为 Weex-vue-loader），它是一个支持组件化、按需加载和隔离的前端模块化方案，常用于构建大型复杂应用中的独立子应用。 Qiankun 主要关注于管理这些子应用（也称为“应用容器”或...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值