问题根源是nginx未正确代理绝对路径静态资源请求。需检查404资源url类型，补全location规则显式代理js/css等后缀，确保proxy_pass末尾带/以正确剥离路径，并同步配置前端publicpath或用sub_filter临时替换路径。
这个问题核心在于：后端返回的 HTML 里，CSS、JS、图片等资源链接写的是绝对路径（比如 /static/js/app.js 或 https://backend.com/css/style.css），而 Nginx 没有把这类请求正确转发给后端，反而尝试在本地找文件，结果找不到就报 404。
先确认是不是绝对路径惹的祸
打开浏览器开发者工具 → Network 标签页 → 刷新页面 → 筛选 404 请求，看失败资源的 Request URL：
- 如果是
https://yourdomain.com/static/js/app.js（域名对，但路径没被 Nginx 代理）→ 属于静态路径未代理 - 如果是
https://backend-server:3000/css/style.css（暴露了后端地址）→ 后端硬编码了完整域名，需改代码或配 baseURL - 如果是
/js/app.js（纯路径，没域名）→ Nginx 的 location 规则没覆盖到，或 proxy_pass 末尾缺 / 导致路径拼错
补全静态资源的 location 代理规则
不要只靠一个 location / 去代理全部请求。Nginx 对 .js、.css 等后缀有默认匹配逻辑，容易误走本地查找。得单独写规则，显式把它们也转发过去：
- 把下面这些块加进 server 配置里，放在
location /后面 - 注意
proxy_pass末尾必须带/，否则路径不会剥离，会多出一层前缀
示例：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
location ~* \.(js|css|png|jpg|jpeg|gif|ico|woff2|ttf|svg|webp)$ {
proxy_pass http://127.0.0.1:3000/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
检查 proxy_pass 的路径剥离是否生效
比如你用 location /admin/ 代理，那么：
- ✅ 正确：
proxy_pass http://127.0.0.1:3000/;→ 请求/admin/css/app.css转发为http://127.0.0.1:3000/css/app.css - ❌ 错误：
proxy_pass http://127.0.0.1:3000;（末尾没 /）→ 同样请求变成http://127.0.0.1:3000/admin/css/app.css，后端通常不认这个路径
前端构建时同步设置 publicPath
如果代理加了路径前缀（比如域名后是 /myapp/），但前端打包仍用 publicPath: '/'，那生成的资源链接就是 /js/app.js，实际该从 /myapp/js/app.js 加载。
- Vue CLI：在
vue.config.js中设publicPath: '/myapp/' - Create React App：在
package.json里加"homepage": "/myapp/" - Vite：配置
base: '/myapp/'
临时兜底：用 sub_filter 替换 HTML 中的路径
后端一时改不了？可以在 Nginx 主 location 里启用内容替换：
- 开启
sub_filter并设sub_filter_once off - 把后端返回的
/static/替成/myapp/static/，或把完整域名替成当前域名 - 记得加
proxy_buffering off和proxy_http_version 1.1，否则可能失效
这方法有效但稍重，优先推荐前面三个更干净的解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
