微前端中样式404本质是路径被负载均衡器重写导致不匹配，需校准publicpath、修正代理规则并加try_files兜底。
微前端架构中，样式表丢失导致 404，本质不是文件真丢了，而是请求路径被负载均衡器重写后，与实际资源位置不匹配。核心问题在于：前端构建产物的静态资源路径（如 /css/app.abc123.css）在跨子应用部署、多级反向代理或负载均衡转发时，被中间层错误截断、补前缀或丢路径段，最终服务器收不到真实资源请求。
确认是否是路径重写导致的 404
打开浏览器开发者工具 → Network 标签页 → 刷新页面 → 筛选 css 类型请求 → 找到状态为 404 的样式文件。点击它，查看：
• Request URL 是否明显比你本地构建输出路径多了/少了某一段（比如多了 /portal/，或本该是 /app-a/css/ 却变成了 /css/）
• Response Headers 中的 Location 或 X-Proxy-Reason（部分 LB 会加）是否有重定向痕迹
• 对比 Nginx / HAProxy 日志，看该请求是否被 rewrite 规则捕获并修改了 URI
统一资源基础路径（publicPath）
这是最根本的修复点。所有子应用构建时，必须根据其**实际部署路径**设置正确的 publicPath：
• 若子应用 A 部署在 https://example.com/app-a/，则 Webpack/Vite 配置中：
✓ publicPath: '/app-a/'
✗ publicPath: '/' 或 publicPath: './'
• 构建后检查生成的 index.html，确认 <link rel="stylesheet" href="/app-a/css/xxx.css"> 路径正确
• 主应用加载子应用时，也要用对应路径（如 qiankun 的 entry: '//cdn.example.com/app-a/'）
校准负载均衡器的重写规则
常见错误配置及修正建议：
• ❌ Nginx 错误示例：location /app-a { proxy_pass http://backend-app-a; }
→ 这会把 /app-a/css/a.css 转发成 /css/a.css（丢前缀），后端无法识别
• ✅ 正确写法：location ^~ /app-a/ { proxy_pass http://backend-app-a/; }
注意末尾斜杠：`proxy_pass` 后带 `/`，才能实现路径前缀替换而非拼接
• HAProxy / ALB / SLB 同理：检查 path-based routing 规则是否做了 strip prefix，确保转发后的 URI 与子应用期望的部署上下文一致
启用资源存在性兜底（防雪崩）
即使路径对齐，CDN 缓存、构建产物未同步等情况仍可能导致临时 404。建议加一层防御：
• 在 Nginx 层对静态资源加 try_files：location ~* \.(css|js|woff2?|ttf|eot|svg)$ { try_files $uri /app-a/index.html; }
→ 让缺失的样式/脚本请求 fallback 到子应用入口，避免白屏
• 或使用 Service Worker 拦截 404 请求，自动补全 base path 后重试（适合 PWA 场景）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
