qiankun子应用静态资源404问题有效解决(涉及 css文件引用图片、svg图片无法转换成 base64等问题)
在👉🏻 qiankun微前端部署👈🏻这个部署方式的前提下,遇到的问题并解决问题的过程
最开始的问题现象
- 通过http请求本地的静态json文件404
- css中部分引入的图片无法显示
最开始的解决方式
在👉🏻 qiankun微前端部署👈🏻这个部署方式的前提下,指望用 nginx配置图片路径转发直接找到子应用的静态资源路径
# 子应用静态资源——通过http请求本地的静态json文件location /map/ {root /usr/share/nginx/html/htmlMicroMypro/MicroMypro;}# 子应用静态资源——css引入的图片location /MicroBase/app-cmp/img/ {auth_request off;alias /usr/share/nginx/html/htmlMicroMypro/MicroMypro/img/;}
最开始的解决结果
首次打开页面图片还是可能会找不到,刷新几次页面才会正常显示(猜测可能是nginx的转发生效了)
再观察问题
标签引用的图片、vue组件中 background引用的图片没有问题,有问题的是css文件中 background引用的图片
再尝试
使用url-loader
将图片文件转换成 base64
结果
svg格式的图片转换成 base64后无法正常显示
再次各种关键字不停地百度
搜到一篇文章⭐️ 关于qiankun微服务css文件中ElementUI字体引用路径的解决方法
最终的解决方式
-
通过http请求本地的静态json文件问题
在请求url前面加上process.env.BASE_URL
-
css中部分引入的图片无法显示问题
main.js
文件中引入的 css文件转移到App.vue
中,再将main.js
中引入App.vue
的方式改为异步加载
const App = resolve => require(['./App'], resolve)
相关文章:

qiankun子应用静态资源404问题有效解决(涉及 css文件引用图片、svg图片无法转换成 base64等问题)
在👉🏻 qiankun微前端部署👈🏻这个部署方式的前提下,遇到的问题并解决问题的过程 最开始的问题现象 通过http请求本地的静态json文件404css中部分引入的图片无法显示 最开始的解决方式 在👉dz…...

Python基础(二十九、pymsql)
文章目录 一、安装pymysql库二、代码实践1.连接MySQL数据库2.创建表格3.插入数据4.查询数据5.更新数据6.删除数据 三、完整代码示例四、结论 使用Python的pymysql库可以实现数据存储,这是一种连接MySQL数据库的方式。在本篇文章中,将详细介绍如何使用pym…...

华为机考入门python3--(0)测试题1-句子平均重量
分类:字符串 知识点: 获取输入 input().strip().split(" ") 拼接列表 " ".join(list) 输出指定位数的浮点数 print("%.2f" % value) len() 函数对于很多内置的数据类型都适用,它返回对象的元素个数或长度。…...

Linux--基础开发工具篇(1)(yum)
1.Linux 软件包管理器 yum 1.1yum是什么?什么是软件包? yum是什么? yum是一个软件下载安装管理的一个客户端,就如小米应用商店,华为应用商城。 Linux中软件包可能有依赖关系--yum会帮助我们解决依赖关系的问题。 什么是…...

循环测试之旅——深度解析Pytest插件 pytest-repeat
在软件开发中,测试的重要性不言而喻。而为了提高测试的鲁棒性和可靠性,Pytest插件 pytest-repeat 应运而生。这个插件可以帮助你轻松实现测试用例的循环运行,以更全面地评估代码的稳定性。本文将深入介绍 pytest-repeat 插件的基本用法和实际案例,助你更好地利用循环测试,…...

Java - OpenSSL与国密OpenSSL
文章目录 一、定义 OpenSSL:OpenSSL是一个开放源代码的SSL/TLS协议实现,也是一个功能丰富的加密库,提供了各种主要的加密算法、常用的密钥和证书封装管理功能以及SSL协议。它被广泛应用于Web服务器、电子邮件服务器、VPN等网络应用中&#x…...

谷粒商城【成神路】-【1】——项目搭建
目录 🥞1.整体架构图 🍕2.微服务划分图 🍔3.开发环境 🍔4.搭建git 🌭5.快速搭建服务 🍿6.数据库搭建 🧂7.获取脚手架 🥓8.代码生成器 🍳9.创建公共模块 …...

yml配置文件怎么引用pom.xml中的属性
目录 前言配置测试 前言 配置文件中的一些参数有时要用到pom文件中的属性,做到pom文件变配置文件中也跟着变,那如何才能做到呢,下面咱们来一起探讨学习。 配置 1.首先要在pom.xml中做如下配置,让maven渲染src/main/resources下配…...
SEW MOVIFIT变频一体机配置
1、操作安全 1 断开MOVIFIT-FC 的供电电源后,由于充电电容的存在,严禁立即触摸导电的设备部件和电源接头。 电源切断后,请等待至少1 分钟 2 只要MOVIFIT-FC 重新接通电源,接线盒的电路就必须闭合。也就是说, MOVIFIT-EBOX 以及混合电缆的插头必须插上并拧紧。 3 运行过…...

nginx反向代理负载均衡
一,kali作为负载服务器 打开kali nginx服务,访问页面如下 使用docker拉取nginx,并做出端口映射 ┌──(root?kali)-[/etc/nginx] └─# docker pull nginx ┌──(root㉿kali)-[/etc/nginx] └─# docker run -p 11111:80 --name Jdr -d ng…...

项目中日历管理学习使用
一些项目中会有日历或日期设置,最基本的会显示工作日,休息日,节假日等等,下面就是基于项目中的日历管理功能,要显示工作日,休息日,节假日 效果图 获取国家法定节假日工具类 public class Holi…...

【单片机】使用AD2S1210旋变芯片读取转子位置和速度
历时十天的反复调试,终于跑通了。只能说第一次做这种小工程确实缺乏经验,跟书本上学的还是有些出入。做下记录,方便后面来查看。 0. 实验要求 基于STM32单片机,使用AD2S1210旋变芯片读取电机转子位置和速度。 硬件设施&#x…...

EasyExcel实现导出图片到excel
pom依赖: <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.1.0</version> </dependency> 实体类: package com.aicut.monitor.vo;import com.aicut.monit…...

Cybellum—信息安全测试工具
产品概述 由于软件和数据在汽车上的使用越来越多,汽车越来越“智能化”,汽车行业面临着重大的信息安全挑战。2021年8月,ISO/SAE 21434正式发布,标准中对汽车的信息安全提出了规范化的要求,汽车信息安全不容忽视。 Cyb…...

六、Kotlin 类型进阶
1. 类的构造器 & init 代码块 1.1 主构造器 & 副构造器在使用时的注意事项 & 注解 JvmOverloads 推荐在类定义时为类提供一个主构造器; 在为类提供了主构造器的情况下,当再定义其他的副构造器时,要求副构造器必须调用到主构造器…...
Chrome 浏览器插件 runtime 字段解析
运行时 runtime 使用 chrome.runtime API 检索 Service Worker,返回有关 manifest.json 的详细信息监听和响应应用或扩展程序生命周期中的事件还可以使用此 API 将网址的相对路径转换为完整的一个 URL 一、权限 Runtime API 上的大多数方法都不需要任何权限 但是…...

七分钟交友匿名聊天室源码
多人在线聊天交友工具,无需注册即可畅所欲言!你也可以放心讲述自己的故事,说出自己的秘密,因为谁也不知道对方是谁。 运行说明: 安装依赖项:npm install 启动:node app.js 运行:直接…...

Aleo项目详细介绍-一个兼顾隐私和可编程性的隐私公链
Aleo上线在即,整理一篇项目的详细介绍,喜欢的收藏。有计划做aleo节点的可交流。 一、项目简介 Aleo 最初是在 2016 年构思的,旨在研究可编程零知识。公司由 Howard Wu、Michael Beller、Collin Chin 和 Raymond Chu 于 2019 年正式成立。 …...

qt学习:实战 http请求获取qq的吉凶
目录 利用的api是 聚合数据 的qq号码测吉凶 编程步骤 配置ui界面 添加头文件,定义网络管理者和http响应槽函数 在界面的构造函数里创建管理者对象,关联http响应槽函数 实现按钮点击事件 实现槽函数 效果 利用的api是 聚合数据 的qq号码测吉凶 先…...

【NodeJS JS】动态加载字体的各方式及注意事项;
首先加载字体这个需求基本只存在于非系统字体,系统已有字体不需要加载即可直接使用; 方案1:创建 style 标签,写入 font-face{font-family: xxx;src: url(xxx)} 等相关字体样式;将style标签添加到body里;方…...

龙虎榜——20250610
上证指数放量收阴线,个股多数下跌,盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型,指数短线有调整的需求,大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的:御银股份、雄帝科技 驱动…...

第19节 Node.js Express 框架
Express 是一个为Node.js设计的web开发框架,它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用,和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

Unity3D中Gfx.WaitForPresent优化方案
前言 在Unity中,Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染(即CPU被阻塞),这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案: 对惹,这里有一个游戏开发交流小组&…...

linux arm系统烧录
1、打开瑞芯微程序 2、按住linux arm 的 recover按键 插入电源 3、当瑞芯微检测到有设备 4、松开recover按键 5、选择升级固件 6、点击固件选择本地刷机的linux arm 镜像 7、点击升级 (忘了有没有这步了 估计有) 刷机程序 和 镜像 就不提供了。要刷的时…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装: 下载安装DevEco Studio 4.0(支持HarmonyOS 5)配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化: ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...
什么是EULA和DPA
文章目录 EULA(End User License Agreement)DPA(Data Protection Agreement)一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA(End User License Agreement) 定义: EULA即…...

Netty从入门到进阶(二)
二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架,用于…...
【Android】Android 开发 ADB 常用指令
查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

基于PHP的连锁酒店管理系统
有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发,数据库mysql,前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...
Vue 模板语句的数据来源
🧩 Vue 模板语句的数据来源:全方位解析 Vue 模板(<template> 部分)中的表达式、指令绑定(如 v-bind, v-on)和插值({{ }})都在一个特定的作用域内求值。这个作用域由当前 组件…...