当前位置： 首页 > news >正文

qiankun子应用静态资源404问题有效解决（涉及 css文件引用图片、svg图片无法转换成 base64等问题）

news 文章来源：https://blog.csdn.net/weixin_40615155/article/details/135871594 2024/11/29 5:27:36

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

最开始的问题现象

  1. 通过http请求本地的静态json文件404在这里插入图片描述
  2. 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字体引用路径的解决方法

最终的解决方式

  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)

相关文章：

qiankun子应用静态资源404问题有效解决（涉及 css文件引用图片、svg图片无法转换成 base64等问题）

在👉🏻 qiankun微前端部署👈🏻这个部署方式的前提下，遇到的问题并解决问题的过程 最开始的问题现象 通过http请求本地的静态json文件404css中部分引入的图片无法显示 最开始的解决方式 在👉&#x1f3…...

编程日记 2024/1/27 9:38:27

Python基础（二十九、pymsql）

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

编程日记 2024/1/27 9:33:22

华为机考入门python3--（0）测试题1-句子平均重量

分类：字符串 知识点： 获取输入 input().strip().split(" ") 拼接列表 " ".join(list) 输出指定位数的浮点数 print("%.2f" % value) len() 函数对于很多内置的数据类型都适用，它返回对象的元素个数或长度。…...

编程日记 2024/1/27 9:32:21

Linux--基础开发工具篇（1）（yum）

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

编程日记 2024/1/27 9:30:19

循环测试之旅——深度解析Pytest插件 pytest-repeat

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

编程日记 2024/1/27 9:27:16

Java - OpenSSL与国密OpenSSL

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

编程日记 2024/1/27 9:24:13

谷粒商城【成神路】-【1】——项目搭建

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

编程日记 2024/1/27 9:22:12

yml配置文件怎么引用pom.xml中的属性

目录 前言配置测试 前言 配置文件中的一些参数有时要用到pom文件中的属性，做到pom文件变配置文件中也跟着变，那如何才能做到呢，下面咱们来一起探讨学习。 配置 1.首先要在pom.xml中做如下配置，让maven渲染src/main/resources下配…...

编程日记 2024/1/27 9:20:10

SEW MOVIFIT变频一体机配置

１、操作安全 1 断开MOVIFIT-FC 的供电电源后，由于充电电容的存在，严禁立即触摸导电的设备部件和电源接头。 电源切断后，请等待至少1 分钟 2 只要MOVIFIT-FC 重新接通电源，接线盒的电路就必须闭合。也就是说， MOVIFIT-EBOX 以及混合电缆的插头必须插上并拧紧。 3 运行过…...

编程日记 2024/1/27 9:18:08

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…...

编程日记 2024/1/27 9:11:02

项目中日历管理学习使用

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

编程日记 2024/1/27 9:07:59

【单片机】使用AD2S1210旋变芯片读取转子位置和速度

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

编程日记 2024/1/27 9:06:57

EasyExcel实现导出图片到excel

pom依赖&#xff1a; <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.1.0</version> </dependency> 实体类&#xff1a; package com.aicut.monitor.vo;import com.aicut.monit…...

编程日记 2024/1/27 9:05:56

Cybellum—信息安全测试工具

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

编程日记 2024/1/27 9:04:54

六、Kotlin 类型进阶

1. 类的构造器 & init 代码块 1.1 主构造器 & 副构造器在使用时的注意事项 & 注解 JvmOverloads 推荐在类定义时为类提供一个主构造器&#xff1b; 在为类提供了主构造器的情况下&#xff0c;当再定义其他的副构造器时&#xff0c;要求副构造器必须调用到主构造器…...

编程日记 2024/1/27 9:03:54

Chrome 浏览器插件 runtime 字段解析

运行时 runtime 使用 chrome.runtime API 检索 Service Worker&#xff0c;返回有关 manifest.json 的详细信息监听和响应应用或扩展程序生命周期中的事件还可以使用此 API 将网址的相对路径转换为完整的一个 URL 一、权限 Runtime API 上的大多数方法都不需要任何权限 但是…...

编程日记 2024/1/27 9:00:50

七分钟交友匿名聊天室源码

多人在线聊天交友工具&#xff0c;无需注册即可畅所欲言&#xff01;你也可以放心讲述自己的故事&#xff0c;说出自己的秘密&#xff0c;因为谁也不知道对方是谁。 运行说明&#xff1a; 安装依赖项&#xff1a;npm install 启动&#xff1a;node app.js 运行&#xff1a;直接…...

编程日记 2024/1/27 8:54:45

Aleo项目详细介绍-一个兼顾隐私和可编程性的隐私公链

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

编程日记 2024/1/27 8:48:40

qt学习：实战 http请求获取qq的吉凶

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

编程日记 2024/1/27 8:43:35

【NodeJS JS】动态加载字体的各方式及注意事项；

首先加载字体这个需求基本只存在于非系统字体&#xff0c;系统已有字体不需要加载即可直接使用&#xff1b; 方案1&#xff1a;创建 style 标签&#xff0c;写入 font-face{font-family: xxx;src: url(xxx)} 等相关字体样式&#xff1b;将style标签添加到body里&#xff1b;方…...

编程日记 2024/1/27 8:40:32

每次请求sessionid变化【SpringBoot+Vue】

引言&#xff1a;花了一晚上的时间&#xff0c;终于把问题解决了&#xff0c;一开始后端做完后,用apifox所有接口测试都是可以的,但当前端跑起来后发现接收不到后端的数据。 当我写完前后端&#xff0c;主页面和获取当前页面信息接口后&#xff0c;配置了cros注解 CrossOrigin…...

编程日记 2024/1/27 8:39:31

勤学苦练“prompts“，如沐春风“CodeArts Snap“

前言 CodeArts Snap 上手一段时间了&#xff0c;对编程很有帮助。但是&#xff0c;感觉代码编写的不尽人意。 我因此也感到困惑&#xff0c;想要一份完整的 CodeArts Snap 手册看看。 就在我感觉仿佛"独自彷徨在这条悠长、悠长又寂寥的雨巷"时&#xff0c;我听了大…...

编程日记 2024/1/27 8:37:30

springboot(ssm线上医院挂号系统 在线挂号预约系统Java系统

springboot(ssm线上医院挂号系统 在线挂号预约系统Java系统 开发语言&#xff1a;Java 框架&#xff1a;springboot&#xff08;可改ssm&#xff09; vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysql 5.7&a…...

编程日记 2024/1/27 8:33:27

万界星空科技可视化数据大屏的作用

随着科技的不断发展和进步&#xff0c;当前各种数据化的设备也是如同雨后春笋般冒了出来&#xff0c;并且其可以说是给我们带来了极大的便利的。在这其中&#xff0c;数据大屏就是非常具有代表性的一个例子。 数据大屏的主要作用包括&#xff1a; 数据分析&#xff1a;数据大屏…...

编程日记 2024/1/27 8:32:26

5月22日比特币披萨日，今天你吃披萨了吗？

比特币披萨日 1. Laszlo Hanyecz2. 最贵披萨诞生记3. 梭哈买披萨4. 未完待续 2010年5月22日&#xff0c;美国佛罗里达州的程序员Laszlo Hanyecz&#xff08;拉兹洛哈涅克斯&#xff09;用10000个比特币购买了棒约翰&#xff08;Papa Johns&#xff09;比萨店一个价值25美元的奶…...

编程日记 2024/1/27 8:27:22

内网穿透、远程桌面、VPN的理解

最近在研究内网穿透的相关技术&#xff0c;然后回想起一些相关的技术&#xff0c;比如说要远程桌面公司的电脑&#xff0c;VPN连入内网等。然后想着在此处记录一下&#xff0c;各个的区别&#xff0c;这个纯粹是从技术层面的理解&#xff0c;此处不详细解释怎么去实现或者用什么…...

编程日记 2024/1/27 8:26:20

如何发布自己的npm包，详细流程

发布自己的npm包需要遵循以下具体流程&#xff1a; 创建npm账号&#xff1a;打开浏览器&#xff0c;访问npm官网&#xff0c;注册一个npm账号。 创建项目文件夹并进入&#xff1a;在本地创建一个项目文件夹&#xff0c;并使用终端进入该文件夹。 初始化包信息管理文件&#x…...

编程日记 2024/1/27 8:23:16

【书生·浦语大模型实战】“PDF阅读小助手”学习笔记

1 参考资料 《新版本Lmdeploy量化手册与评测》 2 项目资料 项目主页&#xff1a;【tcexeexe / pdf阅读小助手】 3 模型运行测试 在InternStudio平台中选择A100 (1/4)的配置&#xff0c;镜像选择Cuda11.7-conda&#xff0c;可以选择已有的开发机langchain&#xff1b; 3.1…...

编程日记 2024/1/27 8:13:08

用ChatGPT写申请文书写进常春藤联盟？

一年前&#xff0c;ChatGPT 的发布引发了教育工作者的恐慌。现在&#xff0c;各大学正值大学申请季&#xff0c;担心学生会利用人工智能工具伪造入学论文。但是&#xff0c;聊天机器人创作的论文足以骗过大学招生顾问吗&#xff1f; ChatGPT简介 ChatGPT&#xff0c;全称聊天生…...

编程日记 2024/1/27 8:12:07

uni-app导航栏自定义“返回按钮”多种方法设置原生返回

方法一、 导航栏返回按钮事件 onBackPress监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack表示来源是 uni.navigateBack；详见app、H5、支付宝小程序onBackPress() { this.back1(); …...

编程日记 2024/1/27 8:11:04

高端网站建设设计公司有哪些/百度的合作网站有哪些

例子一 var obj {n:1};(function(x){ console.log(x.n); // 1 x.n3; var obj {n:2}; // 内部声明的变量不会影响外面的obj对象 console.log(obj.n) // 2})(obj); // 传入的是一个指针(值), x是obj指针的副本, 两者都指向同一个对象console.log(obj.n); //3 例子二…...

编程日记 2024/11/29 5:15:07

二 建设电子商务网站的必要性/怎么做营销推广

protege Protg软件是斯坦福大学医学院生物信息研究中心基于Java语言开发的本体编辑和知识获取软件&#xff0c;或者说是本体开发工具&#xff0c;也是基于知识的编辑器&#xff0c;属于开放源代码软件。这个软件主要用于语义网中本体的构建&#xff0c;是语义网中本体构建的核心…...

编程日记 2024/11/29 2:00:59

东戴河网站建设/免费推广seo

TCL&#xff08;Transaction Control Language&#xff09;事务控制语言 COMMIT 提交SAVEPOINT 设置保存点ROLLBACK 回滚SET TRANSACTION 转载于:https://www.cnblogs.com/Skyyj/p/6514874.html...

编程日记 2024/11/29 0:24:11

做企业网站的人才/域名被墙查询

前言&#xff1a;最近要实现在多个marker上添加分别添加InfoWindow并同时显示&#xff0c;效果如下图&#xff0c;可是使用高德提供的InfoWindow只是在点击某个marker显示当前的InfoWindow无法同时显示。 通过自定义marker的icon实现&#xff0c;具体代码如下&#xff1a; priv…...

编程日记 2024/11/28 21:58:47

wordpress阅读付费主题/为企业策划一次网络营销活动

git init 在git命令行中依次输入 touch readme.txt并回车&#xff0c; git add . 点代表所有, git commit -m "init first"并回车&#xff0c;三条命令&#xff0c;这三条命令作用是创建一个readme.txt文件并提交到版本库中. git remote add origin https://github.c…...

编程日记 2024/11/28 21:56:46

网站运营管理教材/郑州seo优化外包顾问阿亮

dockerfile的构建过程解析Dockerfile内容基础知识&#xff1a;每条保留字指令都必须为大写字母且后面要跟随至少一个参数指令按照从上到下顺序执行#表示注释每条指令都会创建一个新的镜像层&#xff0c;并对镜像进行提交Dockerfile执行的大致流程&#xff1a;docker从基础镜像运…...

编程日记 2024/11/28 14:11:02