Nginx中alias与root行为本质不同：root是根目录追加URI路径，alias是完全替换location匹配部分；CSS 404主因常为alias路径未对齐或末尾缺/，导致请求路径拼接错误。
nginx alias 和 root 混用导致 CSS 404
前端页面里写 ，但 Nginx 返回 404，最常见原因是 alias 配置路径没对齐。它和 root 的行为完全不同：root 是拼接完整路径，alias 是直接替换 location 路径段。比如：
-
location /css/ { alias /app/static/css/; }→ 请求/css/app.css会去找/app/static/css/app.css -
location /css/ { root /app/static/; }→ 请求/css/app.css会去找/app/static/css/app.css（一样） -
location /static/css/ { alias /app/static/css/; }→ 请求/static/css/app.css才会映射到/app/static/css/app.css；如果误写成/css/，就少了一级路径，必然 404
实际部署中，Vue/React 打包后常把 CSS 放在 dist/css/，而 Nginx 容器内默认根目录是 /usr/share/nginx/html。若你用 alias 想单独挂载 CSS 目录，必须确保 location 前缀和 alias 后路径能“抵消”——否则文件根本找不到。
如何用 docker run 挂载 CSS 目录并配 alias
不建议在容器里改文件，应该用 volume 挂载 + 外部配置。假设你本地有 ./dist/css/，想让 /css/ URL 直接指向它：
- 先创建宿主机目录：
mkdir -p ./nginx-conf/conf.d ./dist/css - 写
./nginx-conf/conf.d/css.conf：
location /css/ {
alias /usr/share/nginx/html/css/;
expires 1y;
add_header Cache-Control "public, immutable";
}
- 启动容器时挂载两个路径：
docker run -d -p 80:80 --name nginx-css -v $(pwd)/dist/css:/usr/share/nginx/html/css -v $(pwd)/nginx-conf/conf.d:/etc/nginx/conf.d nginx:latest - 注意：
alias后的路径必须是容器内绝对路径，且要和-v挂载的目标路径一致；不能写成alias /dist/css/，因为那个路径在容器里不存在
Vue 打包后 CSS 路径不匹配？检查 publicPath 和 Nginx 配置联动
Vue CLI 默认设 publicPath: "/"，打包出的 index.html 里 CSS 引用是 /css/app.xxxx.css。如果你把整个 dist/ 挂到 /usr/share/nginx/html，那用 root 最稳妥；只有当 CSS 单独存在别处（比如和后端 static 合并）、或要做 CDN 分离时，才需要用 alias。
- 若坚持用
alias /css/，前端构建时得同步改vue.config.js：
module.exports = {
publicPath: '/css/' // 让 webpack 把 CSS 引用全改成 /css/app.css
}
- 但这样 JS、图片等也得跟着改，容易漏；更推荐统一用
root+ 整体挂载dist/，只在必要时用alias做特殊路径隔离 - Django 的
static和 Vue 的dist混合部署时，alias就很实用：比如location /static/ { alias /app/static/; }和location / { root /app/dist/; }并存
修改 conf 后容器不生效？别忘了重载 Nginx 配置
挂载了 conf.d，改完文件不代表配置立刻生效。Docker 容器里的 Nginx 不会自动监听文件变化：
- 最安全方式：
docker exec nginx-css nginx -t && docker exec nginx-css nginx -s reload - 如果提示
nginx: [alert] could not open error log file: open() "/var/log/nginx/error.log" failed (13: Permission denied)，说明日志目录权限不对，加个-v $(pwd)/nginx-logs:/var/log/nginx挂载即可 - 不要用
docker restart，它会中断连接；nginx -s reload是平滑重载，不影响正在处理的请求 - 验证是否生效：
docker exec nginx-css ls /usr/share/nginx/html/css/看文件在不在，再 curl 测试返回头和内容
alias 的坑在于路径计算是“字符串替换”，不是“目录映射”，稍不留神就差一级斜杠或大小写。上线前务必用 curl -I http://localhost/css/app.css 看状态码和 Content-Type，别只靠浏览器 F5。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
