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.mfbz.cn/a/350980.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

YOLO系列(YOLO1-YOLO5)技术规格、应用场景、特点及性能对比分析

文章目录 前言一、YOLOv1-YOLOv5技术规格对比:二、主要应用场景和特点:三、性能对比分析:四、市场应用前景及对不同用户群体的潜在影响:总结 前言 YOLO(You Only Look Once)系列模型作为一种实时目标检测算…

OpenAI 降低价格并修复拒绝工作的“懒惰”GPT-4,另外ChatGPT 新增了两个小功能

OpenAI降低了GPT-3.5 Turbo模型的API访问价格,输入和输出价格分别降低了50%和25%。这对于使用API进行文本密集型应用程序的用户来说是一个好消息。 OpenAI官网:OpenAI AIGC专区:aigc 教程专区:AI绘画,AI视频&#x…

npm,cnpm install报:Error: certificate has expired at TLSSocket.onConnectSecure

问题描述 最近发现前端项目 CI/CD 时失败,报下面的错误。npm淘宝镜像源证书过期导致的。 [npminstall:get] retry GET https://registry.npm.taobao.org/vue-router after 400ms, retry left 1, error: ResponseError: certificate has expired, GET https://reg…

【Unity小技巧】一个脚本实现控制3D远程/近战敌人AI

最终效果 文章目录 最终效果烘培导航地图配置敌人导航数据简单配置敌人动画敌人AI脚本完结 想了解导航的其他内容可以看我这篇文章:【Unity游戏开发教程】零基础带你从小白到超神29——导航系统 烘培导航地图 选中地面,设置为静态导航 点击烘培&#xf…

《动手学深度学习(PyTorch版)》笔记4.4

注:书中对代码的讲解并不详细,本文对很多细节做了详细注释。另外,书上的源代码是在Jupyter Notebook上运行的,较为分散,本文将代码集中起来,并加以完善,全部用vscode在python 3.9.18下测试通过。…

写静态页面——魅族声学_前端页面练习

1、效果: 1、html代码: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>魅族声学</titl…

5G时代下的融合CDN新风口

近年来&#xff0c;随着网络技术的飞速发展&#xff0c;互联网流量视频化的趋势日益明显&#xff0c;视频应用使互联网的可扩展性、可演进性、服务质量和网络安全面临诸多挑战。为克服传统IP网络在服务视频应用当中的不足&#xff0c;内容分发网络CDN被提出&#xff0c;并迅速成…

java servlet运输公司管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java Web运输公司管理系统是一套完善的java web信息管理系统 serlvetdaobean mvc 模式开发 &#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主 要采用B/S模式开发。开发环境为TOMCAT7.0,Myeclipse8.5…

Go的单元测试

开发项目过程中&#xff0c;少不了单元测试&#xff1b;下面我们认识下单元测试&#xff1a; Go 语言测试框架可以让我们很容易地进行单元测试&#xff0c;但是需要遵循五点规则。 含有单元测试代码的 go 文件必须以 _test.go 结尾&#xff0c;Go 语言测试工具只认符合这个规…

2. MySQL 多实例

重点&#xff1a; MySQL 的 三种安装方式&#xff1a;包安装&#xff0c;二进制安装&#xff0c;源码编译安装。 MySQL 的 基本使用 MySQL 多实例 DDLcreate alter drop DML insert update delete DQL select 2.5&#xff09;通用 二进制格式安装 MySQL 2.5.1&#xff…

JavaScript学习-原型和原型链

原型和原型链 示例代码 //创建一个Person类 class Person {constructor(name) {this.name name;}drink() {console.log(喝水);} } //创建一个Teacher类&#xff0c;继承Person class Teacher extends Person {constructor(name, subject) {super(name);this.subject subjec…

微信小程序 仿微信聊天界面

1. 需求效果图 2. 方案 为实现这样的效果&#xff0c;首先要解决两个问题&#xff1a; 2.1.点击输入框弹出软键盘后&#xff0c;将已有的少许聊天内容弹出&#xff0c;导致看不到的问题 点击输入框弹出软键盘后&#xff0c;将已有的少许聊天内容弹出&#xff0c;导致看不到的问…

FFMPEG解析ts流

三篇相关联的文章&#xff1a; ffmpeg下HLS解析过程-CSDN博客TS文件格式详解及解封装过程-CSDN博客 FFMPEG解析ts流-CSDN博客 一、简介 关于TS格式解析&#xff0c;可以参考《TS文件格式详解及解封装过程-CSDN博客》&#xff0c;本文主要代码部分解读。建议大家熟读iso138…

【JaveWeb教程】(30)SpringBootWeb案例之《智能学习辅助系统》的详细实现步骤与代码示例(3)员工管理的实现

目录 SpringBootWeb案例033. 员工管理3.1 分页查询3.1.1 基础分页3.1.1.1 需求分析3.1.1.2 接口文档3.1.1.3 思路分析3.1.1.4 功能开发3.1.1.5 功能测试3.1.1.6 前后端联调 3.1.2 分页插件3.1.2.1 介绍3.1.2.2 代码实现3.1.2.3 测试 3.2 分页查询(带条件)3.2.1 需求3.2.2 思路分…

电流检测电路设计方案汇总

电流检测电路设计方案&#xff08;一&#xff09; 低端检流电路的检流电阻串联到地&#xff08;图1&#xff09;&#xff0c;而高端检流电路的检流电阻是串联到高电压端&#xff08;图2&#xff09;。两种方法各有特点&#xff1a;低端检流方式在地线回路中增加了额外的线绕电…

内网穿透natapp使用教程(Linux)

我的使用场景&#xff1a;在家访问学校服务器&#xff0c;由于不在一个局域网&#xff0c;所以需要使用内网穿透&#xff0c;我使用的是natapp。需要在有局域网的时候做好以下步骤。 &#xff08;natapp官网&#xff1a;https://natapp.cn/&#xff09; 1. 下载客户端 &#x…

开发微信小程序,将图片下载到相册的方法,saveImageToPhotosAlbum怎么用

在开发微信小程序的时候&#xff0c;经常能看到小程序里面有下载按钮&#xff0c;如何将小程序中的图片下载到手机相册中那&#xff0c;下面给大家说一下怎么做&#xff0c;代码如何去写。 一、到微信小程序后台开启“用户隐私保护指引” 1.进入小程序后台&#xff0c;侧拉拉到…

第16章_网络编程(网络通信要素,TCP与UDP协议,网络编程API,TCP网络编程,UDP网络编程,URL编程)

文章目录 第16章_网络编程本章专题与脉络1. 网络编程概述1.1 软件架构1.2 网络基础 2. 网络通信要素2.1 如何实现网络中的主机互相通信2.2 通信要素一&#xff1a;IP地址和域名2.2.1 IP地址2.2.2 域名 2.3 通信要素二&#xff1a;端口号2.4 通信要素三&#xff1a;网络通信协议…

[C#]winform部署yolov5实例分割模型onnx

【官方框架地址】 https://github.com/ultralytics/yolov5 【算法介绍】 YOLOv5实例分割是目标检测算法的一个变种&#xff0c;主要用于识别和分割图像中的多个物体。它是在YOLOv5的基础上&#xff0c;通过添加一个实例分割模块来实现的。 在实例分割中&#xff0c;算法不仅…

自动化软件开发常用代码分享!

随着科技的发展&#xff0c;自动化软件开发已经成为现代企业不可或缺的一部分&#xff0c;自动化软件可以帮助企业提高生产效率、降低成本、优化业务流程。 而在自动化软件开发中&#xff0c;代码是实现这些功能的基础&#xff0c;本文将分享一些常用的自动化软件开发代码&…