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.hqwc.cn/news/433437.html

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

相关文章

Blender教程-视图分割与3D游标-05

一、简介 Blender试图分割的作用主要有以下几点: 多角度查看模型:通过视图分割,用户可以从多个角度查看和比较模型,更好地理解和评估模型的细节和比例。多模型处理:当你在Blender中同时处理多个模型时,视…

五、Flask学习之MySQL

五、Flask学习之MySQL 1. 下载MySQL 下载教程:MySQL安装及可视化工具SQLyog下载 2.常用指令 2.1. 查看已有数据库 show databases;2.2. 创建数据库 create database 名字 DEFAULT CHARSET utf8 COLLATE utf8_general_ci;2.3. 删除数据库 drop database 名字;…

智能AI系统开发,专业软件硬件物联网开发公司,探索未来科技新纪元

在信息时代,人工智能(AI)、物联网等前沿技术日益受到人们的关注。智能AI系统、专业软件硬件物联网开发公司应运而生。今天,我们将向大家介绍一家位于XX城的专业公司,致力于智能AI系统开发和软件硬件物联网领域的创新研…

用Excel辅助做数独

做数独游戏的时候,画在纸上很容易弄花眼,所以我考虑用Excel辅助做一个。 界面如下: 按下初始化表格区域按钮,会在所有单元格中填充“123456789”。如下图: 当某个单元格删除得只剩一个数字时,会将同一行、…

【分布式技术专题】「分布式技术架构」 探索Tomcat技术架构设计模式的奥秘(Server和Service组件原理分析)

探索Tomcat技术架构设计模式的奥秘 Tomcat系统架构分析Tomcat 整体结构Tomcat总体结构图以 Service 作为“婚姻”1) Service 接口方法列表 2) StandardService 的类结构图方法列表 3) StandardService. SetContainer4) StandardService. addConnector 以 Server 为“居”1) Ser…

[ACM学习] 树形dp之换根

算法概述 总的来说: 题目描述:一棵树求哪一个节点为根时,XXX最大或最小 分为两步:1. 树形dp 2. 第二次dfs 问题引入 如果暴力就是 O(n^2) , 当从1到2的时候,2及其子树所有的深度都减一,其它…

【AndroidStudio】2022.3Giraffe连接超时,更换下载源,使用本地gradle,版本对应问题

记录了使用AndroidStudio2022.3 Giraffe版本在搭建环境时遇到的问题,包括连接超时,gradle无法读取等。 如果只看如何正确的配置,直接跳转第3节 配置汇总 1 连接超时 项目一开始会自动下载gardle文件来加载项目 1.1 Connect timed out 基…

Vulnhub靶场DC-3

本机192.168.223.128 靶机192.168.223.139 目标发现nmap -sP 192.168.223.0/24 端口扫描nmap -p- 192.168.223.139 之开启了一个80端口 看一下是什么服务 nmap -sV -p- -A 192.168.223.139是一个apache服务,joomla模板 看一下web 没什么有用信息。 扫描一下后台…

高学历人士互相残害现象的深度剖析与教育体制反思

高学历人士互相残害现象的深度剖析与教育体制反思 In-Depth Analysis and Educational System Reflection on the Phenomenon of High-Educated Individuals Harming Each Other 在当今社会,随着教育水平的普遍提升,高学历人士之间的恶性事件时有发生&am…

【代码随想录15】110.平衡二叉树 257. 二叉树的所有路径 404.左叶子之和

目录 110. 平衡二叉树题目描述参考代码 257. 二叉树的所有路径题目描述参考代码 404.左叶子之和题目描述参考代码 110. 平衡二叉树 题目描述 给定一个二叉树,判断它是否是高度平衡的二叉树。 本题中,一棵高度平衡二叉树定义为: 一个二叉树…

MIT_线性代数笔记:线性代数常用计算公式

目录 1.矩阵的加法和数乘2.矩阵的乘法3.转置 Transposes 相关运算 1.矩阵的加法和数乘 2.矩阵的乘法 1)标准方法(行乘以列) 矩阵乘法的标准计算方法是通过矩阵 A 第 i 行的行向量和矩阵 B 第 j 列的列向量点积得到 cij。即我们常说的点积,也…

【操作系统】调用硬盘并且实现MBR与Loader的过渡——原理篇

一.概述 前文(【操作系统】优化MBR程序:让MBR调用显存吧)中的MBR程序仅有512字节大小,完全不能将内核成功加载到内存并且运行,所以我们需要在另一个程序中完成初始化环境以及加载内核的任务,这个程序称之为…