Nginx部署后CSS路径出错，90%因前端publicPath未对齐代理路径或proxy_pass末尾漏/；需确保三者严格一致：浏览器请求路径、Nginx location前缀、前端publicPath均含且仅含正确尾部斜杠，如/myapp/，并显式代理静态资源后缀。
直接说结论：Nginx 部署后 CSS 路径出错，90% 是因为前端构建时 publicPath 没对齐代理路径，或 Nginx 的 proxy_pass 末尾漏了 /。不是 CSS 文件丢了，是浏览器发错了请求，而 Nginx 没转对。
检查浏览器 Network 中的 404 请求 URL 是什么
打开 DevTools → Network → 刷新 → 筛选 css → 找状态为 404 的请求，看它的 Request URL：
- 如果是
https://example.com/css/app.css（没带子路径），但你项目实际部署在/myapp/下 → 说明前端打包用了publicPath: '/'，该改成'/myapp/' - 如果是
https://example.com/myapp/css/app.css404 → 很可能 Nginx 的proxy_pass写成了http://127.0.0.1:3000（缺末尾/），导致路径被拼成/myapp/myapp/css/app.css - 如果是
https://example.com/static/css/app.css404 → 后端返回的 HTML 里写了绝对路径，Nginx 缺少对应location ^~ /static/代理规则
确保 proxy_pass 末尾带斜杠
Nginx 的路径剥离逻辑完全取决于 proxy_pass 行末有没有 /。不带就是拼接，带才是替换：
- ✅ 正确：
location /myapp/ { proxy_pass http://127.0.0.1:3000/; }→/myapp/css/app.css转发为/css/app.css - ❌ 错误：
location /myapp/ { proxy_pass http://127.0.0.1:3000; }→ 同样请求变成/myapp/css/app.css，后端收不到 - 所有带路径前缀的
location块，proxy_pass后必须以/结尾，否则必踩坑
静态资源后缀必须显式代理，不能依赖 location /
默认的 location / 只代理动态请求；.css、.js 等后缀容易触发 Nginx 内置的文件查找逻辑，直接 404：
立即学习“前端免费学习笔记（深入）”；
- 加独立规则，放在
location /后面：location ~* \.(js|css|png|jpg|gif|woff2|svg)$ { proxy_pass http://127.0.0.1:3000/; } - 不要用
root或alias处理这些请求——那是服务本地文件，不是代理 - 如果后端返回的 HTML 里用了
/assets/main.css这类路径，还得补一条：location ^~ /assets/ { proxy_pass http://127.0.0.1:3000/; }
前端构建时 publicPath 必须匹配部署路径
publicPath 决定了打包后所有资源链接的前缀，它和 Nginx 配置是绑定关系：
- Vite 项目：在
vite.config.ts中设base: '/myapp/'（注意结尾有/） - Vue CLI：在
vue.config.js中设publicPath: process.env.NODE_ENV === 'production' ? '/myapp/' : '/' - Create React App：在
package.json中设"homepage": "/myapp/" - 改完必须重新构建，然后检查生成的
index.html里<link href="/myapp/css/xxx.css">是否正确
最容易被忽略的是：Nginx 的 location 前缀、前端的 publicPath、浏览器地址栏里的实际路径，这三者必须严格对齐。差一个字符，比如少个 / 或多一层 myapp，CSS 就会消失——而且错误表现很隐蔽，看起来像样式没写，其实是压根没加载成功。
