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

Alice_hhu

已于 2024-07-02 18:16:46 修改

阅读量2.5k

点赞数 8

分类专栏： qiankun微前端文章标签： qiankun微前端

于 2024-01-26 18:28:59 首次发布

本文链接：https://blog.csdn.net/weixin_40615155/article/details/135871594

版权

4 篇文章

订阅专栏

在👉🏻 qiankun微前端部署👈🏻这个部署方式的前提下，遇到的问题并解决问题的过程

2024.07.02 添加 Vue3.0的写法

>> 问题现象

在👉🏻 qiankun微前端部署👈🏻这个部署方式的前提下，指望用 nginx配置图片路径转发直接找到子应用的静态资源路径

在这里插入图片描述

首次打开页面（清空缓存再进入页面）图片还是可能会找不到，刷新几次页面才会正常显示。
（猜测是不是多刷新几次页面有了缓存还是怎么的才使得 nginx的转发生效了）

<img>标签引用的图片、vue组件中 background引用的图片没有问题，有问题的是独立的 css文件中 background引用的图片

使用url-loader将图片文件转换成 base64

svg格式的图片转换成 base64后无法正常显示，百度不到类似的问题，不知道怎么办

通过http请求本地的静态json文件问题
在请求url前面加上process.env.BASE_URL
css文件中引入的图片找不到的问题
main.js文件中引入的 css文件转移到App.vue中，再将main.js中引入App.vue的方式改为异步加载

Vue2.0的写法如下

	const App = resolve => require(['./App'], resolve)

在这里插入图片描述
Vue3.0的写法如下

	import { createApp, defineAsyncComponent } from 'vue'
	
	const App = defineAsyncComponent({
	  loader: () => import('./App.vue')
	})

在这里插入图片描述