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

在👉🏻 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)

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

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

相关文章

行测-言语:2.语句表达

行测-言语:2.语句表达 1. 语句排序题 捆绑就是看两句话是不是讲的同一个内容,相同内容的句子应该相连。 1.1 确定首句 1.1.1 下定义(……就是 / 是指) A 1.1.2 背景引入(随着、近年来、在……大背景 / 环境下&#…

Android 渲染机制

1 Android 渲染流程 一般情况下,一个布局写好以后,使用 Activity#setContentView 调用该布局,这个 View tree 就创建好了。Activity#setContentView 其实是通过 LayoutInflate 来把布局文件转化为 View tree 的(反射)…

使用Go语言编写自定义的HTTP代理:探险网络奇幻之旅

你是否曾经想过自己也能编写一个代理服务器,掌握网络冲浪的主动权?现在,有了Go语言,这个梦想不再遥不可及!让我们一起踏上这段探险之旅,用Go语言编写一个自定义的HTTP代理,开启网络奇幻之旅&…

Map集合(Key-Value键值对集合)

Map基本使用 通过一个特定的关键信息(键)去查询对应的值。使用List来实现存在效率非常低的问题&#xff0c;因为平均需要扫描一半的元素才能确定&#xff0c;而Map这种键值(key-value)映射表的数据结构&#xff0c;作用就是能高效通过key快速查找value(元素) Map<K,V>是…

音频格式之AAC:(3)AAC编解码原理详解

系列文章目录 音频格式的介绍文章系列&#xff1a; 音频编解码格式介绍(1) ADPCM&#xff1a;adpcm编解码原理及其代码实现 音频编解码格式介绍(2) MP3 &#xff1a;音频格式之MP3&#xff1a;(1)MP3封装格式简介 音频编解码格式介绍(2) MP3 &#xff1a;音频格式之MP3&#x…

HNU-编译原理-甘晴void学习感悟

前言 熬过煎熬的考试周、复习以及更加煎熬的等成绩&#xff0c;查到成绩的那一刻&#xff0c;心里还是挺开心的。 虽然我没有完全学懂这门课程&#xff0c;但我还是兢兢业业地通过了课程的考试&#xff0c;拿到了这门课程的认可。 记录一下自己对编译原理的学习感悟&#xf…

优化用户体验测试应用领域:提升产品质量与用户满意度

在当今数字化时代&#xff0c;用户体验测试应用已经成为确保产品质量、提升用户满意度的关键工具。随着技术的不断发展&#xff0c;用户的期望也在不断演变&#xff0c;因此&#xff0c;为了保持竞争力&#xff0c;企业必须将用户体验置于产品开发的核心位置。本文将探讨用户体…

使用JavaScript实现复杂功能:一个完整的电商网站搜索功能

一、概述 随着互联网的发展&#xff0c;电子商务网站已经成为人们购物的重要平台。而在这些网站中&#xff0c;搜索功能无疑是核心功能之一。用户可以通过搜索快速找到他们需要的商品&#xff0c;从而提高购物体验。本文将详细介绍如何使用JavaScript实现一个完整的电商网站搜…

知识圣殿,智慧熔炉

知识圣殿&#xff0c;智慧熔炉 知识殿堂&#xff0c;巍然屹立 一座灵魂熔炉&#xff0c;号称图书馆 万卷书香盈架&#xff0c;智慧如星河汇聚 每一册书页&#xff0c;流淌着人类文明的血脉 钢笔与墨水交织诗篇 思想发芽&#xff0c;真理绽放光焰 浩瀚知识海洋&#xff0c;波涛…

Dlearning

Deep Learning Basic 神经网络&#xff1a; #mermaid-svg-rR22a8Udy5SxGOoP {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-rR22a8Udy5SxGOoP .error-icon{fill:#552222;}#mermaid-svg-rR22a8Udy5SxGOoP .error-t…

【MATLAB源码-第122期】基于matlab斑马优化算法(ZOA)无人机三维路径规划,输出做短路径图和适应度曲线。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 斑马优化算法&#xff08;Zebra Optimization Algorithm&#xff0c;简称ZOA&#xff09;是一种模仿斑马群体行为的优化算法。在自然界中&#xff0c;斑马是一种社会性很强的动物&#xff0c;它们具有独特的群体行为模式&…

C语言中的整数安全:溢出、回绕

一、无符号数回绕 无符号数永远不会溢出&#xff0c;只是在无限的循环往复。对于加法、乘法&#xff0c;假装有额外的有效位来承载运算结果&#xff0c;最后再直接截断。 for (uint32 i n; i > 0; i--) {... // 死循环 } 加法例子 uint8 sum ...; uint8 i ...; if (…

【STM32】STM32学习笔记-硬件SPI读写W25Q64(40)

00. 目录 文章目录 00. 目录01. SPI简介02. W25Q64简介03. SPI相关API3.1 SPI_Init3.2 SPI_Cmd3.3 SPI_I2S_SendData3.4 SPI_I2S_ReceiveData3.5 SPI_I2S_GetFlagStatus3.6 SPI_I2S_ClearFlag3.7 SPI_InitTypeDef 04. 硬件SPI读写W25Q64接线图05. 硬件SPI读写W25Q64示例06. 程序…

1块9毛钱,修复拓牛TC1D智能垃圾桶盖子不能正常开合的故障

前言 21年9月份买了拓牛的智能垃圾桶&#xff0c;一直用的很流畅&#xff0c;再加上屋里没啥有机垃圾&#xff0c;也没有宠物&#xff0c;用上之后每次投入垃圾&#xff0c;之后都会盖上盖子&#xff0c;没有很多的异味散发&#xff0c;屋里也没有蟑螂等害虫。 再加上门口有帘…

Chrome单独配置代理的方法

Windows Windows上单独对Chrome设置代理&#xff0c;需要在启动时传递参数&#xff0c;具体步骤如下。 在Chrome浏览器的快捷方式上右击&#xff0c;进入属性。在 快捷方式 标签下找到 目标 项目&#xff0c;在最后添加 –proxy-server“socks5://xxx.xxx.xx.xx:xxxx” 如果要…

Flink SQL 实时数据开发经验总结

使用SQL实现流处理的核心技术 在了解了Table\SQL API的使用方法以及作业运行机制之后&#xff0c;接下来分析SQL实现流处理的核心技术。 为什么要分析这个问题呢&#xff1f; 因为传统的关系代数以及SQL最开始是为了批处理设计的&#xff0c;在传统关系型数据库以及批处理中…

Java面试题(7)

35.什么是反射 反射就是在程序运行期间动态的获取对象的属性和方法的功能叫做反射。它能够在程序运行期间&#xff0c;对于 任意一个类&#xff0c;都能知道它所有的方法和属性&#xff0c;对于任意一个对象&#xff0c;都能知道他的属性和方法。 获取 Class对象的三种方式&a…

扩展坞 接两个显示器

笔记本电脑如何外接两个显示器&#xff0c;达到三个屏同时显示&#xff1f; 3 笔记本有 2 个显示扩展接口 目前笔记本中最常见的就是 1 个 HDMI 口 1 个支持 DP 协议的 Type-C 口或 2 个支持 DP 协议的 Type-C 口&#xff0c;此时使用 HDMI 线和 Type-C 转接线分别直连两台显…

SpringBoot操作Jedis

SpringBoot操作Jedis 1、pom依赖 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://ma…

Ceres 源码阅读之 TrustRegionMinimizer::Minimize 函数简析

文章目录 Part.I IntroductionPart.II 源码剖析Chap.I TrustRegionMinimizer 类介绍Chap.II Minimize 函数介绍Part.I Introduction Ceres 中求解优化问题的迭代求解方法(minimizer_type)有线性搜索方法(LINEAR_SEARCH)、信赖域方法(TRUST_REGION)等,其中TRUST_REGION 是…