Nginx alias挂载虚拟目录时CSS/JS加载失败，主因是location与alias尾部斜杠未严格配对：location /admin/需配alias /var/www/admin/，否则路径拼接错误致404；还需确保前端publicPath匹配、权限充足、路径真实存在并启用try_files兜底。
用 alias 挂载虚拟目录时，CSS 和 JS 文件加载失败，绝大多数情况不是文件本身问题，而是路径映射逻辑没对上——alias 是前缀替换，不是拼接，稍有偏差就 404。
location 和 alias 的斜杠必须严格配对
这是最常踩的坑。斜杠位置错了，Nginx 就会把 URI 错误拼接到物理路径里，导致找不到 .css 或 .js 文件：
-
location 以 / 结尾 → alias 也必须以 / 结尾：
location /admin/ { alias /var/www/admin/; }请求/admin/js/app.js→ 实际读取/var/www/admin/js/app.js（/admin/被完整剥离） -
location 不带 / → alias 也不能带 /：
location /api { alias /opt/backend; }请求/api/v1/user→ 实际读取/opt/backend/v1/user - 反例：
location /static/ { alias /data/css; }（alias 少了 /）→ 请求/static/main.css可能变成/data/css//main.css，双斜杠触发权限或路径解析失败
确保资源路径与前端构建配置一致
比如 Vue 或 React 子应用部署在 /admin/ 下，打包时必须设对 publicPath：
JavaStoryDevelop
下载
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- Vue CLI：在
vue.config.js中写publicPath: '/admin/' - Vite：在
vite.config.ts中设base: '/admin/' - 这样生成的
<link href="/admin/css/style.css">才能被location /admin/ { alias /var/www/admin/; }正确命中 - 如果 publicPath 写成
./或''，浏览器会按相对路径请求，大概率变成/css/style.css，而该路径可能根本没配置 alias
加 try_files 防止前端路由或缺失资源报 404
单页应用（SPA）的 JS/CSS 加载没问题，但用户手动刷新子路由（如 /admin/dashboard）时容易 404。用 try_files 回退到入口 HTML：
立即学习“Java免费学习笔记（深入）”；
location /admin/ { alias /var/www/admin/; try_files $uri $uri/ /admin/index.html; }- 注意：
/admin/index.html是相对于 alias 路径的，即对应/var/www/admin/index.html - 同理，若 CSS 文件偶尔缺失，可兜底到默认样式：
try_files $uri /admin/css/fallback.css;
检查系统级就绪条件
配置写对只是第一步，还得让 Nginx 真的读得到文件：
-
权限要够：Nginx 工作进程（通常是
www-data或nginx用户）需对目标目录有r-x权限；父目录（如/var/www）至少要有x（执行）权限才能进入 -
路径必须真实存在：
alias /var/www/admin/要求该目录已创建，且非空；Nginx 不会自动建目录 -
验证实际路径：临时开启 debug 日志（
error_log /var/log/nginx/error.log debug;），看 access 日志中open()调用的目标路径是否和你预期完全一致
