多应用静态资源404主因是请求路径、文件实际位置与服务配置三者不一致；需核对浏览器network中404资源url、vue.config.js的publicpath（或cra的homepage）、web服务器root/alias指向及后端路由是否误拦截静态资源。
多应用静态资源 404 通常不是代码写错了，而是路径没对上、服务没配好，或构建产物没放对位置。核心要搞清：谁在请求静态资源？请求路径是什么？文件实际在哪？三者是否一致。
确认静态资源的最终访问路径
浏览器开发者工具 Network 标签里看 404 请求的 URL，比如：
/static/js/main.abc123.js
这个路径是相对于站点根目录（不是项目根目录）的。如果应用部署在子路径下（如 https://example.com/myapp/），那静态资源就该从 /myapp/static/... 加载，而不是 /static/...。
- Vue CLI：检查 vue.config.js 中的 publicPath，生产环境需设为 '/myapp/' 或 './'（相对路径）
- React（CRA）：设置 homepage 字段为 "/myapp"（package.json）
- Webpack：确保 output.publicPath 与部署路径匹配
检查 Web 服务器是否正确托管静态目录
构建后的 dist/ 或 build/ 目录必须被 Web 服务器当作静态文件根目录暴露出去。常见误区：
- Nginx 把 root 指向了项目源码目录，而非构建产物目录
- 用了 alias 却没加结尾斜杠，导致子路径资源 404（例如 alias /static /var/www/app/dist/static; 缺少 / 会失败）
- 部署多个应用时，不同子路径（如 /app1/ 和 /app2/）未分别配置 location 块指向各自 dist 目录
避免 HTML 中硬编码绝对路径
生成的 index.html 里引用的 <script></script>、 路径应由构建工具自动注入，而非手动写死 /static/...。否则换部署路径就得改 HTML。
- 确保使用
（配合相对路径）或让构建工具自动处理 publicPath - 不要在 Vue/React 组件里用 require('/static/logo.png') —— 这种写法绕过构建系统，无法重写路径
- 图片等资源尽量走模块导入（import logo from '@/assets/logo.png'），由 webpack/vite 处理成带 hash 的正确路径
后端路由别吞掉静态资源请求
如果用 Node.js、Django、Spring Boot 等托管前端，常因「所有未知路径都 fallback 到 index.html」而误伤静态资源请求。
- 静态资源路径（如 /static/、/assets/、/js/、/css/）必须在 fallback 之前被明确识别并返回文件
- Express 示例：
app.use('/myapp/static', express.static(path.join(__dirname, 'dist/static')));
app.use('/myapp/', express.static(path.join(__dirname, 'dist')));
app.get('/myapp/*', (req, res) => res.sendFile(path.join(__dirname, 'dist/index.html')));
