CSS样式失效的根本原因是Nginx未返回Content-Type: text/css，需确认http块中已include mime.types且含text/css css映射，避免default_type覆盖或location内误配，再通过curl -I验证响应头。
样式丢失不是因为CSS文件没传上去，而是Nginx没把它当CSS来发——浏览器收到text/plain或空Content-Type头，直接忽略解析，哪怕文件200存在也白搭。
检查 Nginx 是否返回了正确的 Content-Type
别只看Network面板里状态码是200，重点盯Content-Type响应头。执行：
curl -I http://localhost/style.css | grep "Content-Type"
期望输出：Content-Type: text/css。如果返回text/plain、application/octet-stream，或压根没这行，说明MIME类型没生效。
-
include mime.types;必须出现在http { }块里，不能漏，也不能写在location里重复包含 - 确认
mime.types路径正确：Linux常见于/etc/nginx/mime.types，macOS可能是/usr/local/etc/nginx/mime.types；可用find / -name mime.types 2>/dev/null定位 - 检查有没有某处写了
default_type application/octet-stream;——它会覆盖所有未匹配类型的资源，CSS首当其冲被干掉
Vue 或 React 项目打包后路径错位导致 CSS 404
本地开发用vue-cli-service serve能跑，是因为开发服务器自动处理了路径；但Nginx不会帮你“猜”资源在哪。打开dist/index.html，看这类引用：
- 如果href是
/css/app.css（以/开头），说明项目期望部署在域名根路径下；若你实际部署在https://example.com/myapp/，就得改publicPath: '/myapp/'并重新打包 - 如果href是
css/app.css（无/），说明是相对路径，此时Nginx的root或alias必须和HTML中路径层级严丝合缝对齐 - 用
alias时特别容易错：比如location /css/ { alias /var/www/dist/static/css/; }，请求/css/app.css会被映射到/var/www/dist/static/css/app.css；但若写成location /static/css/，而HTML里引的是/css/app.css，那就完全不命中
CDN 或浏览器缓存掩盖真实响应头
你看到的Content-Type可能根本不是Nginx发的——中间层或缓存早把旧头塞进去了。
- 先关掉Cloudflare等CDN，用服务器IP直连测试，排除中间代理干扰
- 加
-H "Cache-Control: no-cache"强制绕过浏览器缓存：curl -I -H "Cache-Control: no-cache" http://localhost/style.css - DevTools里勾选“Disable cache”，再刷新Network面板
最常被忽略的一点：Nginx配置改完必须nginx -t验证再nginx -s reload，否则include mime.types加了也白加；还有Windows用户要注意路径分隔符混用——root C:\www\dist;得写成root C:/www/dist;，反斜杠会直接让Nginx解析失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
