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

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

2024-06-06 10:06:13 前端知识 前端哥 877 261 我要收藏

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

在这里插入图片描述 在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11022.html
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!