qiankun中主系统启动子系统本地静态图片加载404或者跨域问题

最新推荐文章于 2024-05-09 17:38:33 发布
最新推荐文章于 2024-05-09 17:38:33 发布
阅读量780 收藏 9
点赞数 10
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lixu_boke/article/details/134989906
版权

由于本地启动主系统和子系统，如果主系统内不放子系统的图片就会导致主系统访问不到子系统的图片

对于这个问题有三种解决方案，这里一一说明

1、第一种也是我常用的，就是把子系统中的静态图片全部转为base64这样通过主系统访问的时候就不是通过路径访问而是直接访问base64转为图片

我们只要在vue.config.js的chainWebpack中增加打包转换就行

rule就会把assets中images中png、jpg、gif、svg的图片转为base64，当然这里有一个limit这个就是把不能大于多少kb的图片转为base64

2、第二种就是在ng的config中把静态文件的加载路径配置上去通过ng去访问

3、第三种就是和第一种差不多就是在第一种的options中有一个publicPath这个路径去通过不同的环境配置不同的路径

有什么不对的请大家共同学习，可以在下面留言

lixu_boke
关注
  • 10
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
cesium跨域加载问题
02-20
解决Cesium访问数据跨域问题，数据使用tomcat部署在服务器上。
基于vite的qiankun微前端框架下，子应用的静态资源无法加载的问题
Lea_HQ的博客
12-17 802
基于vite的qiankun微前端框架下，子应用的静态资源无法加载的问题
qiankun微服务搭建遇到的坑
富朝阳的博客
09-25 795
最近博主在开发一个微服务架构搭建的编程导航，方便大家学习交流。程序员导航是一个以Angular13.0,vue3.x, React16前端技术框架开发的一站式程序员学习工作娱乐导航网站，以让程序员更便捷为使命，始终围绕程序员需求，为程序员提供最新工具导航的便捷性服务网站！下面说说本人在做qiankun微前端改造时遇到的一些坑，希望对大家有帮助。
qiankun微前端 为什么微应用加载的资源会 404
热门推荐
就是不掉头发
12-19 23万+
原因是 webpack 加载资源时未使用正确的 publicPath。 可以通过以下两个方式解决这个问题： a. 使用 webpack 运行时 publicPath 配置 qiankun 将会在微应用 bootstrap 之前注入一个运行时的 publicPath 变量，你需要做的是在微应用的 entry js 的顶部添加如下代码： __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__; 关于运行时 publicPath
快速解决跨域请求问题:jsonp和CORS
10-18
主要介绍了快速解决跨域请求问题:jsonp和CORS，涉及jsonp和CORS的介绍，分享了前端 jQuery 写法，后端 SpringMVC 配置，后端非 SpringMVC 配置等相关内容，具有一定借鉴价值，需要的朋友可以参考下。
wl-mfe:基于vue3 + koa2 + qiankun2的微前端后台管理系统项目实战
03-11
wl-mfe 基于vue3.0-beta和qiankun2.0极速尝鲜！微前端进阶实战项目。项目地址： 微前端实战详细入门教程和解放方案请转至我另一篇文章：。项目地址： &&部署教程： 最终效果 项目启动 npm run yinit // 使用yarn下载依赖，推荐 npm run cinit // 使用cnpm下载依赖 npm run init // 或 使用npm下载依赖 npm run serve // 运行全部项目 yarn serve y // yarn运行全部项目 npm run build // 打包全部项目 yarn build y // 打包全部项目 npm run publish // 执行发布脚本 注意：如果下载报错，报bin / sh找到启动命令，那你可能是mac或linux，那就进入目录一个下载运行吧。另
micro-application:qiankun微前端，子应用pdf转图片项目
03-16
##微前端微前端框架 。包含了一个子应用： pdf转图片子应用 ＃主应用就是一个建筑物 ＃安装在三个目录下分别运行 npm i ＃开发在三个目录下分别执行 npm run dev ＃部署 先后执行 node vue-pdf-server.js node main-server.js
[qiankun]跨域
前端
01-15 6140
问题 Access to fetch at ‘https://xxx.xxx.xx.com/’ from origin ‘http://0.0.0.0:8080’ has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space private. 但是线上却没有该问题，考虑线上的资源的开放性是相同的，那么本地调试时如何解决该
qiankun框架访问微应用报跨域问题(has been blocked by CORS policy)
小白学习html
12-01 1390
在浏览器中直接执行chrome://flags/#block-insecure-private-network-requests ，选中Disabled ，重启后就可以恢复正常了。
关于 qiankun 微前端 本地跨域问题
qq_53439433的博客
07-31 1114
需要修改 vue.config.js配置。
qiankun微应用加载第三方js、sdk跨域报错
吴纯玲的博客
09-02 5057
qiankun会把静态资源的加载拦截，改用fetch方式获取资源，所以要求这些资源支持跨域。 虽然qiankun也提供了解决方案，但支持跨域的方式也颇为复杂，有没有更简单的方式，纯前端实现？幸在qiankun提供了excludeAssetFilter。
Vue动态加载图片在跨域时无法显示的问题及解决方法
11-21
写在前面 小记，就简单写了 。问题：VUE开发时因为要访问后端的接口所以要配置请求转发，如果直接转发全部请求，那么VUE动态绑定的src也会转发到后端，因为图片在前端，所以会收到404 NOT FOUND的报错。 常规的请求转发 在vue-cli3内，直接编辑vue.config.js，如下： let proxyObj={}; proxyObj['/']={ ws:false, target:'http://localhost:8023',//后端地址 changeOrigin:true, pathRewrite:{ '^/':'' } }; module.exp
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
iframe 接班人-微前端框架 qiankun 在中后台系统实践
大转转FE
09-25 2244
「福利」 ✿✿ ヽ(°▽°)ノ ✿：文章最后有抽奖，转转纪念 T 恤，走过路过不要错过哦背景 在转转的中台业务中，交易流转、业务运营和商户赋能等功能，主要集中在两个系统中（暂且命名为 i...
微前端 qiankun vue2 为主应用，接入 vue2、umi4、umi3、react 子项目问题总结
qq_37309987的博客
04-16 426
背景：需要搭建一个平台，这个平台的主要功能是集成各个子系统，方面对系统之间的统一管理。在搭建这样一个平台时，前端考虑使用微前端架构方式实现，使用的框架是 qiankun，本文主要记录在 qiankun 框架使用过程中遇到的问题，及解决方法。主应用挂载组件：/component/Micro.vue。代码上传到了 github 上，后序会持续更新代码。主应用中未提供子应用需要挂载的 dom 元素。安装 qiankun。
vue项目，qiankun 微(子)应用 JSONP 跨域错误怎么处理
weixin_42116924的博客
10-24 668
qiankun子应用jsonp跨域报错解决办法（vue）
关于乾坤加载子应用导致跨域?
weixin_43191327的博客
11-23 1909
问题: 加载百度地图 sdk 导致跨域 由此联想到的问题, 为什么乾坤可以劫持很多请求, 子应用的js和css资源加载都会被拦截到 ? 通常加载 script 的方式 通过script标签 通过动态创建 script 插入 html 以上两种方式都不会造成跨域, 在 chrome 里面两者的请求归属于 js 资源, 并不是 fetch/xhr, 乾坤在请求子应用的时候, 会先拿到子应用...
九种实用的前端跨域处理方案
Jack, what else can you do besides holding your little darling?
12-07 1475
九种实用的前端跨域处理方案
vue3父组件通过ref调用子组件的方法(组合模式，defineExpose）
最新发布
徐同保的专栏
05-09 269
vue3父组件通过ref调用子组件的方法(组合模式，defineExpose）
qiankun主应用动态调用子应用方法
05-18
在qiankun中，主应用可以通过 `loadMicroApp` 方法动态加载子应用，并且可以通过 `start` 方法启动子应用实例。一旦启动了子应用实例，主应用就可以通过 `getMicroApp` 方法获取子应用实例，然后调用子应用中暴露的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值