关于qiankun框架加载子应用时出现的问题

xiaoxizhendiqiang

已于 2024-08-21 18:21:24 修改

阅读量1.4k

点赞数 5

文章标签：前端前端框架 vue.js

于 2024-08-21 17:10:55 首次发布

本文链接：https://blog.csdn.net/weixin_44745053/article/details/141391798

版权

一、子应用无法正常访问到静态资源

1.子应用base 路径的误配置

Vite 的 base 配置用于确定静态资源的公共基础路径。如果你将子应用部署在某个特定的子路径下，如 https://example.com/app/，那么 base 应该设置为 '/app/'。如果设置为 '/'，则构建后的静态资源会尝试从根路径加载，导致在子路径下无法找到资源。

解决方案

vite.config.ts 应如下配置：
export default {  
  base: '/app/', // 子应用的基本路径  
  // 其他配置选项...  
}

2. 构建与发布路径不一致

如果在开发环境下，应用是运行在根路径，而在生产环境中部署在子路径（例如通过 Qiankun 挂载），这时需要根据部署的实际路径调整 base 的设置，但如果没有做到，就会出现资源无法找到的情况。

解决方案

在部署时，可以使用环境变量来设置动态的 base 路径，根据不同的环境来调整：例如，对于部署在 /app/ 下的子应用