当前位置: 首页 > news >正文

qiankun子应用使用elementUI操作反馈图标不显示

原因:路径不对,因为主应用和子应用存在跨域的问题。
主要解决方法:
通过Nginx配置路径映射可以解决该问题。
1、解决跨域和路径映射问题
配置Nginx反向代理,将主应用对子应用资源的请求路径正确映射到子应用的实际路径。例如,主应用请求/subapp/icons时,Nginx将其代理到子应用的实际地址http://subapp-domain.com/icons。

location /subapp/ {proxy_pass http://subapp-domain.com/;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;
}

2、调整前端资源路径
确保子应用的静态资源路径正确配置,避免使用绝对路径或硬编码的主应用地址。在子应用的构建配置中,设置正确的publicPath,使其指向子应用的部署地址。
在Vue CLI项目中,修改vue.config.js:

module.exports = {publicPath: process.env.NODE_ENV === 'production' ? '/subapp/' : '/'
}

3、验证配置
重启Nginx服务使配置生效,使用浏览器开发者工具检查网络请求,确认资源路径是否正确映射。检查响应头中是否包含跨域相关的头信息,如Access-Control-Allow-Origin。

sudo nginx -t
sudo systemctl restart nginx
http://www.dtcms.com/a/478594.html

相关文章:

  • Vue3.0: v-model 组件双向绑定学习文档 (v3.4 前后对比 + TypeScript)
  • 中山哪里有做微网站的做ppt图片用的网站
  • 『 QT 』QT窗口坐标体系详解
  • 服务器里怎么建设网站网站开发网站设计素材
  • 从多个数据源(CSV, Excel, SQL)自动整合数据
  • 智慧零售天气预知可视化监控平台
  • C++设计模式_结构型模式_享元模式Flyweight
  • 网站备案名称能重复吗微官网怎么制作
  • SpringBoot + MyBatis 注解开发入门实践
  • Java EE初阶--多线程
  • 深入理解梯度消失:从DNN到RNN的全面解析与解决方案
  • 南京电子商务网站开发公司石油化工工程建设人才招聘网站
  • 大数据实战:Python+Flask 汽车数据分析可视化系统(爬虫+线性回归预测+推荐 源码+文档)✅
  • 算法8.0
  • 网站左侧导航栏设计一个网站的建设要经过哪几个阶段
  • Java-Linux环境下查看JDK安装路径
  • 嘉立创学习
  • QML学习笔记(三十四)QML的GroupBox、RadioButton
  • AI Agent 的技术架构、产业赋能与治理挑战研究 —— 基于 2024-2025 年技术突破与应用实践的分析
  • 设计美观网站有哪些辽宁网站建设价位
  • vtkFillHolesFilter——3D网格补孔的“一键修复”工具,从原理到避坑
  • 网站建设完整代码深圳开公司流程及费用
  • Vue3为什么选择用Vite?使用指南与优势解析
  • 【STL】set容器(2336.无限集中的最小数字)
  • 第一章 计算机系统概论1
  • Cannot invoke “String.length()“ because “<parameter1>“ is null
  • H5使用环信实现视频或语音通话
  • SMTPman高效稳定的smtp服务器使用指南解析
  • 《Qt应用开发》笔记p3
  • Java-148 深入浅出 MongoDB 聚合操作:$match、$group、$project、$sort 全面解析 Pipeline 实例详解与性能优化