解决qiankun框架子应用打包后css里的图片加载404失败问题

2026-01-10 23:34 前端 13 0
官网解决办法所有图片等静态资源上传至cdn,css中直接引用cdn地址(推荐)借助webpack的url-loader将字体文件和图片打包成base64(适用于字体文件和图片体积小的项目)(推荐)官网解决办法跳转:微应用打包之后css中的字体文件和图片加载404第三种方法可以通过重写qinakun的fetch方法直接修改请求到的css文件里的资源路径functionrewriteCssUrls(cssContent:string,baseUrl:string){returncssContent.replace(/url\((?:'|")?(.*?)['"]?\)/g,(match,p1)=>{consturl=p1.trim();//已经是base64/http(s)/protocol-relative,不处理if(/^(?:data:|https?:\/\/|\/\/)/i.test(url)){returnmatch;}consturlObj=newURL(url,baseUrl);return`url(${urlObj.href})`;});}registerMicroApps([{name:'sub1',entry:'http://127.0.0.1:5500/dist/',container:'#sub1',activeRule:()=>true,}]);start({fetch:(url,opt)=>{returnfetch(url,opt).then(asyncresponse=>{letresponseText=awaitresponse.text();consturlObj=newURL(url.toString());if(urlObj.pathname.endsWith('.css')){responseText=rewriteCssUrls(responseText,urlObj.href.split('/').slice(0,-1).join('/')+'/');}returnnewResponse(responseText,{status:response.status,statusText:response.statusText,headers:response.headers,});});}});可以看到实际加载的文件已经是正确目录了原始css文件是相对路径修改过后实际引入的是相对于子应用的路径了
暂无评论,我会出手
说点什么
登录用户可以修改和删除评论,可以收到回复的邮件提醒点击登录/注册
最多上传8张图片,仅支持jpg,png格式图片,单张大小5MB以内!
用户名: