绝对路径必须与服务器实际可访问的url严格对齐，否则导致404；需通过network面板定位问题url，检查nginx静态资源代理配置、前端构建publicpath/base设置及sub_filter兜底方案。
绝对路径在 HTML 中不是“写对了就行”，而是必须和服务器实际可访问的 URL 路径严格对齐；否则浏览器会按它拼出的地址去请求，Nginx 或 Flask 之类后端找不到对应资源，就直接返回 404。
怎么确认是绝对路径惹的祸
打开浏览器开发者工具 → Network 面板 → 刷新页面 → 筛选 404 请求，重点看 Request URL：
- 如果 URL 是
/static/js/app.js（以/开头，但服务器上没这个物理路径）→ 属于静态资源未被 Nginx 正确代理或未部署到对应位置 - 如果 URL 是
https://backend.example.com/css/style.css（带完整域名）→ 后端模板硬编码了绝对 URL，需改代码或配BASE_URL - 如果 URL 是
/myapp/css/style.css，但你期望的是/css/style.css→ 前端构建时publicPath或base配错了
Nginx 里补全静态资源 location 规则
只靠一个 location / 无法覆盖所有绝对路径请求。浏览器发来的 /js/app.js 请求默认不走 proxy_pass，而可能被 Nginx 当作本地文件找，结果 404。
- 显式添加针对常见静态前缀的
location块，比如：location ^~ /static/、location ^~ /assets/、location ^~ /img/ -
proxy_pass末尾必须带/，否则路径不会剥离：例如location /static/ { proxy_pass http://127.0.0.1:3000/; }才能把/static/main.css转发为http://127.0.0.1:3000/main.css - 避免用正则匹配后缀（如
location ~* \.(js|css)$）来代理——它优先级低于前缀匹配，且容易和location /冲突
前端构建时别乱设 publicPath 或 base
如果你的反代路径是 https://example.com/myapp/，但 Vue CLI 的 vue.config.js 里写了 publicPath: '/'，那生成的 index.html 里所有资源链接就是 /js/app.js，浏览器就会去请求 https://example.com/js/app.js，而不是 https://example.com/myapp/js/app.js。
- Vue CLI：设
publicPath: '/myapp/' - Create React App：在
package.json加"homepage": "/myapp/" - Vite：配置
base: '/myapp/' - 注意结尾斜杠：必须是
'/myapp/'，不是'/myapp'，否则子路径下资源加载会错位
临时兜底：用 sub_filter 替换 HTML 中的绝对路径
当后端完全不可控（比如第三方 SaaS 页面），又必须走反代时，sub_filter 是最后手段。但它只作用于响应体为 text/html 的内容，且不递归处理 JS 里的字符串。
- 启用前确保
proxy_set_header Accept-Encoding "";关闭 gzip，否则sub_filter失效 - 替换要加
sub_filter_once off;，否则只替换第一个匹配项 - 示例：把后端返回的
href="https://real-backend.com/css/style.css"改成href="/css/style.css"，需写两行：sub_filter 'href="https://real-backend.com' 'href="';和sub_filter 'src="https://real-backend.com' 'src="'; - 不推荐长期使用：性能开销大，且无法处理内联 JS 中的路径拼接逻辑
最易被忽略的一点：绝对路径是否真的“绝对”——它依赖的是当前 HTML 文档的 URL 基准，不是你编辑器里看到的文件夹结构；哪怕路径写对了，只要服务器没把那个路径映射到真实文件或代理目标，404 就不会消失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
