qiankun子应用静态资源404问题有效解决(遇到了http请求静态文件404、css文件引用图片无法显示、svg图片转换成 base64无法显示等问题)

在👉🏻 qiankun微前端部署👈🏻这个部署方式的前提下,遇到的问题并解决问题的过程

>> 问题现象

  1. 通过http请求本地的静态json文件404
    在这里插入图片描述
  2. css中部分引入的图片无法显示
    在这里插入图片描述

>> 最开始的解决方式

在👉🏻 qiankun微前端部署👈🏻这个部署方式的前提下,指望用 nginx配置图片路径转发直接找到子应用的静态资源路径

在这里插入图片描述

>> 最开始的解决结果

首次打开页面(清空缓存再进入页面)图片还是可能会找不到,刷新几次页面才会正常显示。
(猜测是不是多刷新几次页面有了缓存还是怎么的才使得 nginx的转发生效了)

>> 再观察问题

<img>标签引用的图片、vue组件中 background引用的图片没有问题,有问题的是独立的 css文件中 background引用的图片

>> 再尝试

使用url-loader将图片文件转换成 base64

>> 又出现问题

svg格式的图片转换成 base64后无法正常显示,百度不到类似的问题,不知道怎么办

>> 重新各种关键字不停地百度

搜到一篇文章⭐️ 关于qiankun微服务css文件中ElementUI字体引用路径的解决方法

>> 最终的解决方式

  1. 通过http请求本地的静态json文件问题
    在请求url前面加上process.env.BASE_URL

  2. css文件中引入的图片找不到的问题
    main.js文件中引入的 css文件转移到App.vue中,再将main.js中引入App.vue的方式改为异步加载

	const App = resolve => require(['./App'], resolve)

在这里插入图片描述 在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/657945.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微信小程序(二十五)条件判断语句与结构隐藏

注释很详细&#xff0c;直接上代码 上一篇 新增内容&#xff1a; 1.条件判断语句的演示 2.隐藏结构的演示 源码&#xff1a; index.wxml <view><!-- wx:if和wx:else为条件判断语句 --><text wx:if"{{isLogin}}">已登入的用户</text><tex…

【HarmonyOS应用开发】ArkUI 开发框架-基础篇-第一部分(七)

常用基础组件 一、组件介绍 组件&#xff08;Component&#xff09;是界面搭建与显示的最小单位&#xff0c;HarmonyOS ArkUI声明式开发范式为开发者提供了丰富多样的UI组件&#xff0c;我们可以使用这些组件轻松的编写出更加丰富、漂亮的界面。组件根据功能可以分为以下五大类…

Flink中StateBackend(工作状态)与Checkpoint(状态快照)的关系

State Backends 由 Flink 管理的 keyed state 是一种分片的键/值存储&#xff0c;每个 keyed state 的工作副本都保存在负责该键的 taskmanager 本地中。另外&#xff0c;Operator state 也保存在机器节点本地。Flink 定期获取所有状态的快照&#xff0c;并将这些快照复制到持…

Android Studio 安装配置教程 - Windows版

Android Studio下载 安装&#xff1a; 下载&#xff1a; Android Studio Hedgehog | 2023.1.1 | Android Developers (google.cn) 安装&#xff1a; 基本不需要思考跟着走 默认下一步 默认下一步 自定义修改路径&#xff0c;下一步 默认下一步&#xff0c;不勾选 默认下一…

RHCE 综合项目-博客

目录 业务需求 一、准备工作 1、配置静态IP 2、修改主机名及hosts映射 3、开启防火墙 4、时间同步 5、配置免密ssh登录 二、环境搭建 1、Server-web端安装LAMP环境软件 2、Server-NFS-DNS端上传博客软件 3、Server-NFS-DNS端设置NFS共享 三、Server-web设置 1、挂…

【代码随想录-链表】反转链表

💝💝💝欢迎来到我的博客,很高兴能够在这里和您见面!希望您在这里可以感受到一份轻松愉快的氛围,不仅可以获得有趣的内容和知识,也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学习,不断总结,共同进步,活到老学到老导航 檀越剑指大厂系列:全面总结 jav…

OpenCV 2 - 矩阵的掩膜操作

1知识点 1-1 CV_Assert(myImage.depth() == CV_8U); 确保输入图像是无符号字符类型,若该函数括号内的表达式为false,则会抛出一个错误。 1-2 Mat.ptr(int i = 0); 获取像素矩阵的指针,索引 i 表示第几行,从0开始计行数。 1-3 const uchar* current = mylmage.ptr(row); 获得…

day26 节点操作——查找节点

目录 DOM节点查找节点父节点查找子节点查找兄弟关系查找 DOM节点 DOM节点&#xff1a; DOM树里每一个内容都称之为节点 节点类型&#xff1a; 元素节点&#xff1a;所有的标签&#xff0c;比如body、div html是根节点属性节点&#xff1a;所有的属性&#xff0c;比如href、cla…

1.26布雷斯悖论(设计做减法,使效率更高,netlogo模拟),自组织映射神经网络SOM

布雷斯悖论 红色的是普通道路&#xff0c;车越多通行时间越长 假定条件是 均衡状态就是两条路的通行时间相同 纳什均衡并不一定是全局最优 纳什均衡的关键就是单个个体做出改变时&#xff0c;只会使自己的利益受到损失&#xff0c;而不会使其他人发生改变 在达到纳什平衡时&…

让MySQL和Redis数据保持一致的4种策略

1 前言 先阐明一下 MySQL 和 Redis 的关系&#xff1a;MySQL 是数据库&#xff0c;用来持久化数据&#xff0c;一定程度上保证数据的可靠性&#xff1b;Redis 是用来当缓存&#xff0c;用来提升数据访问的性能。 关于如何保证 MySQL 和 Redis 中的数据一致&#xff08;即缓存…

DevSecOps 平台需求来源分析

目录 一、为什么要开展DevSecOps平台建设 1.1 产业发展的角度方面分析 1.2 企业内部角度分析 二、 DevSecOps平台建设需求来源 2.1 从外因看DevSecOps平台建设的需求来源 2.1.1 网络安全和数据合规在国内外快速发展 2.1.2 法规的落地促使安全管理的数字化和平台建设成为刚…

网安文件包含漏洞

文件包含概念&#xff1a; 开发人员通常会把可重复使用的函数写到单个文件中&#xff0c;在使用某些函数时&#xff0c;直接调用此文件&#xff0c;而无需再次编写&#xff0c;这种调用文件的过程一般被称为包含。为了使代码更加灵活&#xff0c;通常会将被包含的文件设置为变…

Flink CEP实现10秒内连续登录失败用户分析

1、什么是CEP&#xff1f; Flink CEP即 Flink Complex Event Processing&#xff0c;是基于DataStream流式数据提供的一套复杂事件处理编程模型。你可以把他理解为基于无界流的一套正则匹配模型&#xff0c;即对于无界流中的各种数据(称为事件)&#xff0c;提供一种组合匹配的…

Keepalived + DR 集群

目录 1、Keepalive VRRP 说明 故障切换 工作原理 核心组件 2、Keepalived DR 集群 拓扑规划 前期准备 配置 Httpd 服务 配置 Nginx 服务 配置 LVS 主 node_01 配置 LVS 从 node_02 测试 LVS 集群 测试主备切换 3、Keepalived 脑裂现象 4、Keepalived 心态检测 …

平安健康与中航健康时尚集团携手并进,共创会员制健康管理美好未来

近日&#xff0c;深圳市中航健康时尚集团股份有限公司(以下简称“中航健康时尚”)与平安健康正式达成战略合作。平安健康总裁吴军、中航健康时尚董事长王岚等领导出席签约仪式&#xff0c;就此次战略合作展开深入交流。 据了解&#xff0c;中航健康时尚集团创建于1995年&#x…

内存泄漏的原因及排查方法

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;《爱蹦跶的大A阿》 &#x1f525;当前正在更新专栏&#xff1a;《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》 ​ ​ ✨ 前言 随着网页应用的逐渐复杂化,内存管理也变得越来越重要。内存泄漏不仅会…

YUDIAN(宇电)温控器参数笔记(二)

没想到啊&#xff0c;时隔3年&#xff0c;我又用到了这个温控器&#xff0c;又来更新一下&#xff0c;因为我刚好要做一个简易的控温系统&#xff0c;类似于恒温水槽。 这个系统大概就是&#xff1a; 温控器用pt100测温&#xff0c;作为输入&#xff0c;输入连接到一个ssr上&a…

Start gtkmm 4 Programming (range controls)_

文章目录 基础解析 Chapter 7. Range Widgets https://gtkmm.org/en/documentation.htmlhttps://gnome.pages.gitlab.gnome.org/gtkmm-documentation/index.html 基础 容器: 容器小部件与其他小部件一样&#xff0c;派生自Gtk::Widget.例如Gtk::Grid可以容纳许多子小部件&…

vue3教程,如何手动获取后端数据(入门到精通3,新人必学篇)

概述&#xff1a;没有后端数据的前端&#xff0c;就失去了灵魂&#xff0c;由于本人没有写后端数据&#xff0c;所有调用黑马的&#xff0c;往下看相信对你会有收获的。 目录 第一步&#xff1a;安装axios 第二步&#xff1a;编写后端访问地址 第三步&#xff1a;编写具体的…