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