根本原因是构建路径、产物结构与Nginx映射未对齐；必须设publicPath/base为绝对路径（如/static/），确保CSS中url()生成绝对路径，Docker COPY保留dist目录层级，Nginx用root而非alias映射/static/。
挂载 CSS 文件本身不是问题，真正出问题的是 CSS 里 url() 引用的字体、图片、背景图等资源在容器里 404——根源从来不是“没挂载 CSS”，而是构建路径、产物结构、Nginx 映射三者没对齐。
publicPath 或 base 必须设为绝对路径（如 /static/）
CSS 里的 @import 和 url() 是构建时硬编码进产物的，不是运行时解析的。开发时 ./fonts/icon.woff 能加载，是因为本地 dev server 自动补了前缀；但构建后若没设 publicPath 或 base，就会生成相对路径如 url(../fonts/icon.woff)，进容器后浏览器按当前 CSS 文件位置去算路径，必然 404。
- Vite 用户：在
vite.config.ts中写base: '/static/'，别留空、别写'./'或'/' - Webpack / Vue CLI 用户：在
vue.config.js或webpack.config.js中设publicPath: '/static/' - 改完必须重新执行
npm run build，否则产物还是老路径 - 构建后检查
dist/static/css/app.css里所有url()是否都以/static/开头，例如url(/static/fonts/icon.woff)
Dockerfile 的 COPY 必须保留 dist/ 目录层级
COPY 命令决定容器内文件系统结构，它必须和 publicPath 的值严格对应。如果 publicPath 是 /static/，那构建产物就得是 dist/static/，且 COPY 必须把整个 dist/ 拷过去，否则 /static/ 这一层就没了。
- ✅ 正确：
COPY dist /usr/share/nginx/html/→ 容器内路径为/usr/share/nginx/html/static/ - ❌ 错误：
COPY dist/* /usr/share/nginx/html/→static/目录被展开，/static/fonts/icon.woff实际变成/usr/share/nginx/html/fonts/icon.woff - 进容器验证：
docker exec -it，确认ls -l /usr/share/nginx/html/static/ css/、fonts/、img/都存在
Nginx 的 location ^~ /static/ 必须用 root，不能用 alias
浏览器请求 /static/fonts/icon.woff，Nginx 得把它映射到 /usr/share/nginx/html/static/fonts/icon.woff。用 alias 会截掉匹配前缀，导致路径错一层，这是最隐蔽也最常踩的坑。
- ✅ 正确：
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/） - 如果用了
include /etc/nginx/conf.d/*.conf，把这条规则放在00-static.conf，避免被location /覆盖
最容易被跳过的动作：改了 publicPath 但没重新 build，或者 build 后没删旧 dist 就直接 docker build——容器里跑的还是老产物，路径早就不对了。CSS 里的每个 url() 都是构建阶段定死的，运行时 Nginx 再怎么配也救不回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
