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

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

2024.07.02 添加 Vue3.0的写法

>> 问题现象

  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的方式改为异步加载

Vue2.0的写法如下

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

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

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

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

  • 8
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在使用 qiankun 构建前端应用时,我们需要分别构建主应用应用,并且需要注意它们之间的文件路径配置问题。 对于主应用,我们可以像普通的 Vue/React 应用一样进行构建,使用 webpack 或者其他构建工具进行打包。 对于应用,我们需要在构建时指定输出路径,以便主应用可以正确地加载应用的资源文件。具体来说,我们需要在应用的构建配置文件中进行如下配置: 1. 设置 publicPath:在 webpack 配置文件中,设置 output.publicPath,将其设置为应用部署的路径。比如,如果应用部署在 http://localhost:8080/subapp1,那么 publicPath 应该设置为 /subapp1/。 2. 配置 output.path:将构建生成的文件输出到指定目录中,比如 dist/subapp1 目录。 3. 配置 filename:设置构建后生成的文件名,比如 [name].[hash:8].js。 完成上述配置后,我们需要在主应用中进行如下配置: 1. 在主应用中添加应用的配置信息,包括应用的名称、入口文件、路由信息等。具体可以参考 qiankun 官方文档进行配置。 2. 在主应用中加载应用的资源文件,可以使用如下代码: ``` import { loadMicroApp } from 'qiankun'; loadMicroApp({ name: 'subapp1', entry: '//localhost:8080/subapp1', container: '#subapp-container', activeRule: '/subapp1', }); ``` 其中,entry 指定应用的入口路径,container 指定应用渲染的容器,activeRule 指定应用的激活规则。 需要注意的是,主应用应用文件路径配置需要保持一致,否则应用的资源文件可能无法正确加载。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值