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…

Java中如何详细的打印出具体报错的堆栈信息

在遇到日志打印的时候&#xff0c;当使用log.error("Exception{}", e.toString()); 当使用这种方式打印&#xff0c;只会打印关键的信息&#xff0c;不会打印出栈堆信息&#xff0c;从而无法准确定位到具体某一行发生的错误 比如&#xff0c;在一个接口有方法对一个…

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

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

C语言中为无符号类型变量赋值时,数据类型应怎样转换?

一、问题 为无符号类型变量赋值时&#xff0c;数据类型应怎样转换&#xff1f; 二、解答 1、有符号到无符号的转换 (1)如果将一个有符号整数赋给一个无符号类型变量&#xff0c;并且该有符号数是负数&#xff0c;在转换过程中&#xff0c;C语言会 将有符号数的二进制补码形式…

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

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

RabbitMQ和Kafka对比

RabbitMQ和Kafka都是流行的消息传递系统&#xff0c;但它们在设计哲学、功能特性和最适用的场景上有所不同&#xff1a; 1. 设计和架构 RabbitMQ: 基于AMQP&#xff08;高级消息队列协议&#xff09;。传统的消息代理&#xff0c;支持多种消息模型&#xff0c;如点对点、发布/…

Android Studio 安装配置教程 - Windows版

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

C++ 11新特性之auto和decltype

概述 在C 11标准中&#xff0c;引入了两大关键类型推导机制&#xff0c;即&#xff1a;auto关键字和decltype表达式。这两个特性不仅极大地简化了代码编写&#xff0c;提升了可读性&#xff0c;还为开发者提供了更加灵活、直观的类型声明方式。本文将详细解读auto和decltype的概…

python进程间使用共享内存multiprocessing.shared_memory来通讯

python多个进程通讯使用共享内存 1、multiprocessing.shared_memory ​ 使用这个模块可从进程直接访问共享内存,该模块提供了一个 SharedMemory 类,用于分配和管理多核或对称多处理器(SMP)机器上进程间的共享内存。 ​ 为了协助管理不同进程间的共享内存生命周期,multi…

leetcode-完全二叉树的节点个数

222. 完全二叉树的节点个数 题解&#xff1a; 使用递归的方法来解决这个问题。完全二叉树的节点个数可以通过以下公式计算&#xff1a; 节点个数 左子树节点个数 右子树节点个数 1&#xff08;根节点&#xff09; 首先&#xff0c;我们需要定义一个辅助函数countNodes(r…

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…

计算机网络(第六版)复习提纲17

五 IP数据报的格式 1 IP数据报首部固定部分中的各字段 ①版本&#xff0c;占4位&#xff0c;指协议IP的版本 ②首部长度&#xff0c;占4位&#xff0c;范围是0-15&#xff0c;用于表示首部长度有几个4字节。由于固定长度部分长度位20字节&#xff0c;因此首部长度字段最小为5&…

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;通常会将被包含的文件设置为变…