根本原因是前端构建时相对路径未适配容器内静态资源实际结构，如url(../fonts/icon.woff)在nginx根目录下应为/static/fonts/icon.woff；需配置publicpath/base为/static/，copy dist/到/usr/share/nginx/html/，并用location ^~ /static/ { root /usr/share/nginx/html; }正确映射。
为什么CSS文件在Docker里404？路径错在构建阶段还是运行时？
根本原因不是Nginx没配好，而是CSS中用@import或url()引用的相对路径，在构建时被Webpack/Vite解析为开发环境路径，但容器内静态文件实际结构已变。比如构建产物里main.css写了url(../fonts/icon.woff)，而Nginx根目录下fonts/其实位于/usr/share/nginx/html/static/fonts/——这个层级差就导致404。
实操建议：
- 前端打包前统一设
publicPath（Webpack）或base（Vite）为/static/，确保所有资源URL以/static/开头，不依赖相对路径 - Dockerfile里把构建产物整个拷贝到Nginx默认路径：
COPY dist/ /usr/share/nginx/html/，再额外确认dist/static/是否存在且结构正确 - 用
docker exec -it <container> ls -l /usr/share/nginx/html/static/</container>直连容器验证物理路径
NGINX配置里location怎么写才不漏掉CSS里的font/image请求？
只配location / { }不够，因为CSS内部的url(fonts/a.woff)会触发浏览器发起GET /fonts/a.woff请求，而Nginx默认不会把这类子路径代理给后端，必须显式声明静态资源规则。
实操建议：
- 优先用前缀匹配，避免正则性能损耗：
location ^~ /static/ { root /usr/share/nginx/html; } - 不要写
alias /usr/share/nginx/html/static/——alias会截掉匹配部分，导致/static/css/app.css映射成/usr/share/nginx/html/css/app.css（少了一层static） - 确认Nginx配置加载顺序：如果用了
include /etc/nginx/conf.d/*.conf，确保你的静态规则文件名按字母序早于其他location /块（如命名为00-static.conf）
如何验证CSS引入的字体、图片真正在容器里可访问？
别只刷页面看样式是否生效——浏览器开发者工具的Network标签页里，筛选Font或Img，点开每个404请求，看Request URL是不是你预期的路径；再对比Nginx日志：docker logs <nginx-container> | grep " 404 "</nginx-container>，确认是404还是403（后者可能是权限问题）。
实操建议：
- 进容器手动
wget -O /dev/null http://localhost/static/fonts/icon.woff，绕过浏览器缓存和CORS干扰 - 检查文件权限：
docker exec <container> ls -l /usr/share/nginx/html/static/fonts/</container>，Nginx worker进程需要读权限（至少644） - 如果用了CDN或二级路径（如部署在
/myapp/下），CSS里所有url()必须带完整路径前缀，不能靠Nginx重写补救
Docker构建时COPY CSS相关文件要注意什么？
很多人把src/assets/直接COPY进镜像，却忘了这些原始文件不会被自动编译进dist——真正该COPY的是构建产物里的dist/static/或dist/css/等输出目录，且必须与前端配置的publicPath严格对齐。
实操建议：
- 多阶段构建更安全：第一阶段装Node.js跑
npm run build，第二阶段只COPYdist/到Alpine+Nginx镜像，避免node_modules污染 - 别在Dockerfile里用
COPY . /app然后RUN npm run build——这会让node_modules打进最终镜像，体积暴增且有安全风险 - 检查
dist/里CSS文件内容：grep -r "url(" dist/css/，确认所有路径都符合/static/xxx格式，没有../残留
最常被忽略的是CSS里@import语句的路径处理——它不像url()会被打包工具重写，如果写成@import "theme.css"，就必须确保theme.css也在同一目录并被正确COPY，否则Nginx返回404时连控制台都不会报错，只会静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
