css在docker中404主因是前端构建路径（如url(../fonts/icon.woff)）与容器内文件结构不匹配，须同步配置vite/webpack的base或publicpath为/static/、dockerfile中copy dist/到/usr/share/nginx/html/、nginx用location ^~ /static/ { root /usr/share/nginx/html; }三者严格对齐。
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根目录下根本不存在这个路径。
- 检查构建产物：
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/'，别设成./或空字符串，否则构建产物仍用相对路径，进容器就失效 - 确保
dist/里真有static/子目录——如果构建后是dist/css/直出，就得同步把publicPath设为/，并调整Nginx映射逻辑
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/css/app.css（少了一层static） - 如果用了
include /etc/nginx/conf.d/*.conf，确保你的静态规则文件名按字母序早于其他location /块（如命名为00-static.conf）
最容易被忽略的是构建产物里url()路径和Nginx实际服务路径之间的层级差——它藏在CSS源码里，不打开dist/css/文本文件根本看不到；一旦漏掉这层验证，光调Nginx配置永远解决不了问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
