css在docker容器中404，90%是因前端构建路径与容器内文件结构不匹配，必须同步配置webpack/vite的publicpath或base为/static/、dockerfile中copy dist/到/usr/share/nginx/html/、nginx用location ^~ /static/ { root /usr/share/nginx/html; }三者对齐。
构建阶段就定死路径，否则容器里CSS里的 url() 一定会404。
Webpack/Vite 构建时必须设 publicPath 或 base
CSS中用 @import 或 url() 引入字体、图片，路径是构建时硬编码进产物的，不是运行时解析的。开发时相对路径能跑通，是因为本地服务器自动补了前缀；但Nginx不会帮你“猜”路径。
- Webpack：在
vue.config.js或webpack.config.js中设publicPath: '/static/'，确保所有资源URL以/static/开头 - Vite：在
vite.config.ts中设base: '/static/' - 千万别留空或设
'./'——这会让url(../fonts/icon.woff)编译成相对路径，容器里根本找不到
Dockerfile 中 COPY 路径要和 publicPath 对齐
构建产物结构必须和Nginx服务目录结构一致，否则 /static/css/app.css 里写的 url(/static/fonts/icon.woff) 就真得能在文件系统里找到对应物理路径。
- 前端打包后确认
dist/static/目录存在，且包含css/、fonts/、img/等子目录 - Dockerfile 里用
COPY dist/ /usr/share/nginx/html/，别漏掉dist/这层，否则/static/会变成/usr/share/nginx/html/static/的子目录 - 进容器验证：
docker exec -it <container> ls -l /usr/share/nginx/html/static/fonts/</container>，确保文件真实存在
NGINX 配置不能只靠 location /
CSS内部的 url(fonts/a.woff) 会触发浏览器发请求到 /fonts/a.woff，而这个路径跟你的HTML入口无关，Nginx默认不会把它代理给后端或重写，必须显式处理静态资源前缀。
- 用
location ^~ /static/ { root /usr/share/nginx/html; }，注意是root不是alias -
alias会截掉匹配部分，alias /usr/share/nginx/html/static/会让/static/css/app.css映射到/usr/share/nginx/html/css/app.css（少了一层） - 如果用了
include /etc/nginx/conf.d/*.conf，把静态规则文件名设为00-static.conf，确保它比location /先加载
最容易被忽略的是：构建时路径没改，光调Nginx配置，怎么配都白搭；或者 publicPath 设了但 Dockerfile 没把 dist/ 整体拷过去，导致 /static/ 根本不存在——这两处一错，CSS里所有 url() 请求全挂。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
