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

news2024/11/16 8:24:39

在👉🏻 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.coloradmin.cn/o/1421353.html

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

相关文章

Linux第36步_创建正点原子的TF-A工作区

创建正点原子的TF-A工作区&#xff0c;目的是想查看正点原子的设备树文件“stm32mp157d-atk.dts”和设备树头文件“stm32mp157d-atk.dtsi”&#xff0c;了解设备树是什么样子&#xff0c;为后期基于“ST公司的源码”创建自己的设备树提供参考&#xff0c;同时也是为了学习移植u…

飞桨大模型分布式训练技术

今天我为大家介绍飞桨大模型分布式训练技术&#xff0c;内容分为以下几个部分&#xff1a; 首先&#xff0c;我会介绍大模型训练面临的重点难题&#xff1b;然后&#xff0c;为大家介绍飞桨在大模型训练领域的特色分布式训练技术和优化方案&#xff1b;最后&#xff0c;伴随着…

NeRF:神经辐射场复杂场景的新视图合成技术

NeRF&#xff1a;神经辐射场复杂场景的新视图合成技术 NeRF&#xff1a;神经辐射场复杂场景的新视图合成技术项目背景与意义如何运行&#xff1f;快速开始更多数据集 预训练模型方法与实现结语服务 NeRF&#xff1a;神经辐射场复杂场景的新视图合成技术 在计算机视觉领域&…

工业物联网网关如何实现工业设备的远程运维?-天拓四方

随着工业4.0和智能制造的快速发展&#xff0c;工业设备的远程运维已经成为提高企业生产效率和降低运营成本的重要手段。工业物联网网关作为这一过程中的关键组件&#xff0c;发挥着不可或缺的作用。本文将重点探讨工业物联网网关如何实现工业设备的远程运维&#xff0c;并结合实…

网络和Linux网络_15(IO多路转接)reactor编程_服务器+相关笔试题

目录 1. reactor的服务器 1.1 Sock.hpp 1.2 加协议分割报文 1.3 序列化和反序列化 Protocol.hpp main.cc Epoll.hpp TcpServer.hpp 2. 相关笔试题 答案及解析 本篇完。 1. reactor的服务器 Log.hpp和以前一样&#xff0c;因为下面要写ET模式所以Sock.hpp加了一个把…

[Python] 什么是集成算法,什么是随机森林?随机森林分类器(RandomForestClassifier)及其使用案例

什么是集成算法&#xff1f; 集成算法是一种机器学习方法&#xff0c;它将多个基本的学习算法&#xff08;也称为弱学习器&#xff09;组合在一起&#xff0c;形成一个更强大的预测模型。集成算法通过对基本模型的预测进行加权平均或多数投票等方式&#xff0c;来产生最终的预…

【Leetcode】两数之和

目录 题目&#xff1a; 解法1&#xff1a;暴力双for 1.想到的第一种方法两for循环解 复杂度分析 解法2&#xff1a;hash表 总结&#xff1a; 笔记&#xff1a; 题目&#xff1a; 给定一个整数数组 nums 和一个整数目标值 target&#xff0c;请你在该数组中找出 和为目标…

简单区间DP

文章目录 什么是区间DpAcWing 282. 石子合并题意分析思路解析状态表示状态计算 CODE需要注意的问题 什么是区间Dp 区间Dp指的是某些问题可以用区间来划分解决。 AcWing 282. 石子合并 题目链接&#xff1a;穿梭时间的画面的钟 题意分析 从一排石子中选择相邻的两堆进行合并…

2024-01-25 力扣高频SQL50题目1193每月交易

1.1193每月交易 1 count可以这样用。。 COUNT(IF(state approved, 1, NULL)) AS approved_count 如果 COUNT(if(state approved,1,0))&#xff0c;这里变成0&#xff0c;就不对了。因为count计数时候&#xff0c;只要里面不是null&#xff0c;就会算进去。 sum(if(state …

(学习日记)2024.01.27

写在前面&#xff1a; 由于时间的不足与学习的碎片化&#xff0c;写博客变得有些奢侈。 但是对于记录学习&#xff08;忘了以后能快速复习&#xff09;的渴望一天天变得强烈。 既然如此 不如以天为单位&#xff0c;以时间为顺序&#xff0c;仅仅将博客当做一个知识学习的目录&a…

行为型设计模式—迭代器模式

迭代器模式&#xff1a;也叫作游标模式&#xff0c;能在不暴露复杂数据结构内部细节的情况下遍历其中所有的元素。在迭代器的帮助下&#xff0c; 客户端可以用一个迭代器接口以相似的方式遍历不同集合中的元素。 当集合背后为复杂的数据结构&#xff0c;且希望对客户端隐藏其复…

漏洞原理文件上传漏洞

一 文件上传漏洞介绍&#xff08;理论&#xff09; 文件上传漏洞是一种常见的web应用程序漏洞&#xff0c;允许攻击者向服务器上传恶意文件。这种漏洞可在没有恰当的安全措施的情况下&#xff0c;将任意类型的文件上传到服务器上&#xff0c;从而可能导致以下安全问题&#xff…

【lesson1】高并发内存池项目介绍

文章目录 这个项目做的是什么&#xff1f;这个项目的要求的知识储备和难度&#xff1f;什么是内存池池化技术内存池内存池主要解决的问题malloc 这个项目做的是什么&#xff1f; 当前项目是实现一个高并发的内存池&#xff0c;他的原型是google的一个开源项目tcmalloc&#xf…

Python 字典及常见应用(Python Dctionary)

字典是python的内置基本数据类型之一&#xff0c;其他语言中可能会被称为“关联存储”或“关联数组”。它是一种映射关系&#xff0c;以包含在{}中的"键:值"对表示。字典是一种可变对象&#xff0c;键没有顺序。其主要用途是通过关键字存储、提取值。 目录 一、字典的…

3分钟搞定幻兽帕鲁联机,一键部署专属服务器

3分钟搞定幻兽帕鲁联机&#xff0c;一键部署专属服务器 访问帕鲁专题活动页 登录阿里云官网&#xff0c;用钉钉或者支付宝app扫码注册新用户&#xff08;新用户福利较多&#xff0c;优惠力度大&#xff09; 进入阿里云游戏联机服务器专题页&#xff0c;点击 一键购买及部署 即可…

记录一条sql查询:以逗号隔开的id字符串的查询

目录 前言表结构sql语句 前言 在一个项目中有两张表&#xff0c;一张是商品码表&#xff0c;一张是记录出库单明细的出库记录表&#xff0c;记录表中有一个字段保存了以逗号隔开的商品码表的id字符串&#xff0c;需要根据出库明细id查找到对应出库的商品码。 表结构 goods_det…

TypeScript(六) 循环语句

1. TypeScript循环语句 1.1. 简述 有的时候&#xff0c;我们可能需要多次执行同一块代码。一般情况下&#xff0c;语句是按顺序执行的&#xff1a;函数中的第一个语句先执行&#xff0c;接着是第二个语句&#xff0c;依此类推。   循环语句允许我们多次执行一个语句或语句组…

【开源】JAVA+Vue.js实现大学兼职教师管理系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、研究内容三、界面展示3.1 登录注册3.2 学生教师管理3.3 课程管理模块3.4 授课管理模块3.5 课程考勤模块3.6 课程评价模块3.7 课程成绩模块3.8 可视化图表 四、免责说明 一、摘要 1.1 项目介绍 大学兼职教师管理系统&#xff0c;旨…

阿里云0基础1分钟搞定幻兽帕鲁游戏联机服务器搭建

幻兽帕鲁&#xff08;Palworld&#xff09;是一款备受欢迎的多人在线角色扮演游戏&#xff0c;让玩家可以与其他玩家一起探索、组队和战斗。为了能顺畅地体验游戏&#xff0c;搭建一个高效、稳定的游戏服务器至关重要。阿里云提供快速、简化的服务器搭建方案&#xff0c;新手小…

代码随想录 Leetcode112. 路径总和

题目&#xff1a; 代码(首刷看解析 2024年1月30日 递归回溯 逻辑清晰版&#xff09;&#xff1a; class Solution { public:bool traversal(TreeNode* cur,int sum) {if (!cur->left && !cur->right && sum 0) return true;if (!cur->left &&am…