css在docker容器中404，90%是因前端构建路径（如url(../fonts/icon.woff)）与容器内真实文件结构不匹配，必须同步调整webpack/vite的publicpath/base配置和nginx的location+root规则，三者对齐才有效。
直接说结论：CSS在Docker容器里404，90%不是Nginx没配好，而是前端构建时生成的路径（比如 url(../fonts/icon.woff)）和容器内真实文件结构不匹配——得从前端打包配置和Nginx两头改，缺一不可。
为什么 url(../xxx) 在容器里总 404？
Webpack/Vite 构建时按开发目录结构解析相对路径，但 Docker 镜像里 COPY dist/ /usr/share/nginx/html/ 后，物理路径变成 /usr/share/nginx/html/css/app.css + /usr/share/nginx/html/fonts/icon.woff，而 CSS 里写的 url(../fonts/icon.woff) 实际会请求 /fonts/icon.woff，Nginx 根目录下根本没有这个路径。
- 检查构建产物里的 CSS 内容：
grep -r "url(" dist/css/，看是不是还满屏../ - 确认 dist 目录结构：
ls -R dist/ | head -20，看fonts/是不是和css/同级 - 浏览器 Network 面板里点开 404 的 font 请求，看 Request URL 是不是以
/fonts/开头（说明前端没加 base 前缀）
publicPath 或 base 必须设成 /static/ 这类绝对前缀
相对路径靠不住，必须让所有资源 URL 从构建阶段就带明确前缀。Vite 用 base，Webpack 用 publicPath，值必须和 Nginx 的 location 规则对齐。
- Vite 用户：在
vite.config.ts里写base: '/static/'，这样import './style.css'生成的 link href 就是/static/css/app.css - Webpack 用户：在
vue.config.js或webpack.config.js里设publicPath: '/static/' - 别设成
./或空字符串，否则构建产物仍用相对路径，进容器就失效
Nginx 的 location ^~ /static/ 要配 root，别用 alias
alias 容易少一层路径，root 更直观可靠。假设你把整个 dist/ 拷到 /usr/share/nginx/html/，那么 /static/ 对应的就是这个目录下的 static/ 子目录。
- 正确写法：
location ^~ /static/ { root /usr/share/nginx/html; }→ 请求/static/css/app.css映射到/usr/share/nginx/html/static/css/app.css - 错误写法：
location /static/ { alias /usr/share/nginx/html/static/; }→ 请求/static/css/app.css会去找/usr/share/nginx/html/static/css/app.css（多了一层 static，容易错） - 别漏掉
^~前缀，避免正则 location 优先级干扰
验证时别只刷页面，要看 Network 和容器内真实路径
样式看起来正常 ≠ 所有资源都加载成功。字体、图片这些由 CSS url() 触发的请求，很容易静默失败。
- 浏览器打开 DevTools → Network → Filter 选
Font或Img，挨个点 404 请求，看 Request URL 是什么 - 进容器查文件是否存在：
docker exec -it <container-name> ls -l /usr/share/nginx/html/static/fonts/</container-name> - 查 Nginx 日志确认是 404 还是 403：
docker logs <container-name> | grep "GET.*404"</container-name>
真正卡住人的地方，从来不是单点配置，而是前端构建路径、镜像内文件位置、Nginx location 三者没对齐——改完任一环节，另外两个都得同步核对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
