CSS资源404主因是构建路径未重写，需同步配置Vite/webpack的base或publicPath为'/static/'、Dockerfile正确COPY dist/、Nginx用root而非alias映射/static/。
前端在 Docker 里 CSS 资源 404，90% 不是 Nginx 配错了，而是构建时 url(../fonts/icon.woff) 这类路径没重写，进容器后物理结构和 URL 完全对不上——必须从前端构建、Dockerfile COPY、Nginx 三处同时对齐，缺一不可。
检查构建产物里的 CSS 是否还满屏 ../
打开终端，进到打包后的 dist/ 目录下执行：
grep -r "url(" dist/css/ | head -5
如果输出里大量出现 url(../fonts/...) 或 url(../../img/...)，说明构建阶段没接管路径，相对引用直接硬编码进了 CSS 文件。这类路径在容器里必然失效，因为浏览器会按当前 CSS 文件位置（比如 /static/css/app.css）去解析 ../fonts/，结果请求的是 /fonts/xxx，而你根本没把 fonts/ 放在站点根目录下。
- Vite 项目：确认
vite.config.ts中设置了base: '/static/'，不是'./'也不是空字符串 - Webpack/Vue CLI 项目：确认
vue.config.js中publicPath是'/static/'，不是'./'或'/' - 构建后检查
dist/目录结构：必须存在dist/static/css/和dist/static/fonts/等子目录，否则说明构建没生成预期结构
publicPath 和 base 必须设成带尾部斜杠的绝对前缀
相对路径（如 ./、''）在 Docker 部署中就是定时炸弹。构建工具会把 url(../fonts/a.woff) 原样塞进 CSS，而 Nginx 不会帮你“修正”这个路径。
- Vite：
base: '/static/'→ 生成的，且 CSS 里所有url()自动转为url("/static/fonts/a.woff") - Webpack：
publicPath: '/static/'→ 同样让所有资源 URL 带前缀，包括 JS 动态 import 的图片、CSS 中的字体 - 千万别设成
publicPath: './'：这会让 Webpack 把url()编译成相对路径，容器里一跑就 404 - 设成
'/'也可以，但要求 Nginx 的root必须指向/usr/share/nginx/html，且所有静态文件都在该目录下平铺（不推荐，结构易乱）
Nginx 的 location ^~ /static/ 必须用 root，不能用 alias
这是最常被抄错的一行。假设你 COPY dist/ /usr/share/nginx/html/，那 /static/css/app.css 对应的真实路径就是 /usr/share/nginx/html/static/css/app.css。
- ✅ 正确写法：
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/; }→ 同样请求会被映射到/usr/share/nginx/html/css/app.css（/static/被截掉了，少一层） - 加
^~是为了优先级：确保它比location /先匹配，避免被兜底规则拦截 - 如果你用
include /etc/nginx/conf.d/*.conf，把该配置文件命名为00-static.conf，保证它加载顺序靠前
进容器验证三件事：文件是否存在、路径是否对、Nginx 是否生效
别只看配置文件，一定要进容器里实锤：
docker exec -it <container-id> ls -l /usr/share/nginx/html/static/fonts/</container-id>
如果返回 No such file or directory，说明要么构建没生成 static/ 目录，要么 Dockerfile 没 COPY dist/（漏了 / 就变成 COPY dist /usr/share/nginx/html，整个 dist 变成子目录）。
- 用
curl -I http://localhost/static/css/app.css在容器内测试，看是否返回 200 - 浏览器 Network 面板里点开一个 404 的字体请求，复制
Request URL（比如https://site.com/fonts/icon.woff），说明前端压根没加/static/前缀，问题出在构建配置 - 如果
Request URL是/static/fonts/icon.woff却 404，再查 Nginx 日志：docker exec -ittail -n 20 /var/log/nginx/error.log
最容易被跳过的其实是构建产物本身：publicPath 设对了，但 dist/ 里没有 static/ 子目录；或者 static/ 有，但 Dockerfile 里写成了 COPY dist /usr/share/nginx/html（少斜杠），导致真实路径变成 /usr/share/nginx/html/dist/static/——这种路径错位，光调 Nginx 永远救不回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
