nginx动静分离生效需同时满足三要素：location规则优先级正确、静态路径真实存在、动态请求准确代理；任一缺失将导致404/502或静态资源加载失败。
直接说结论：Nginx 动静分离不是“开个开关”就能生效的，核心在于 location 规则的优先级、静态资源路径的真实存在性、以及动态请求是否被准确代理——三者缺一不可。配错一个，就可能出现 404、502 或静态资源加载失败但页面能打开的诡异现象。
为什么 location ~ \.(js|css|png|jpg)$ 有时不生效？
这不是正则写错了，而是 Nginx 的 location 匹配机制导致的。Nginx 不是“按顺序执行”，而是先分类再选最优匹配：
-
location = /（精确匹配）优先级最高 -
location ^~ /static/（前缀匹配且禁止正则）次高 -
location ~ \.js$（正则匹配）只在没有更高优先级前缀匹配时才参与竞争
常见踩坑点：
- 写了
location / { proxy_pass http://backend; }，又写location ~ \.js$，但因为/是前缀匹配且能覆盖所有路径，.js请求仍被/拦截走 —— 必须把静态规则放在动态规则之前，或改用^~强制终止匹配 - 正则中漏了
gif|svg|woff2|eot等现代字体/图标格式，导致某些资源仍被后端处理，返回 404 或 HTML 页面 - 没加
root或alias，只写location ~ \.css$ {}，Nginx 不知道去哪找文件，直接 404
root 和 alias 到底该用哪个？
这是动静分离中最容易混淆的配置项，区别不在“功能强弱”，而在“路径拼接逻辑”：
-
root /var/www/static;+location /img/ { ... }→ 实际查找/var/www/static/img/xxx.png -
alias /var/www/static/img/;+location /img/ { ... }→ 实际查找/var/www/static/img/xxx.png（/img/被完全替换）
所以：
- 用
root更适合统一静态根目录（如全部静态资源放/var/www/static），配合多段location分类 - 用
alias更适合把某类资源映射到独立路径（比如把/api-docs/直接 alias 到/opt/swagger-ui/），避免路径重复拼接 - 绝对不要在
location /下用alias，会出错；alias后路径必须以/结尾
动静分离后，为什么图片还是慢？
分离只是第一步，性能瓶颈常藏在后续环节：
- 没加
expires 1y;或add_header Cache-Control "public, immutable";，浏览器每次重请求，Nginx 又要走一遍磁盘读取 - 没启用
sendfile on;，小文件还走用户态拷贝，浪费 CPU；大文件尤其明显 - 静态目录权限不对（如
nginx用户无权读/var/www/static/js/），日志里报Permission denied，但浏览器只显示空白或 403 - 前端构建产物没放进正确路径（比如 Vue 打包后
dist/下的js/目录实际在/var/www/static/dist/js/，但 Nginx 配置的是root /var/www/static;+location /js/→ 实际找的是/var/www/static/js/，路径错位）
真正卡住人的，往往不是“会不会配”，而是“有没有验证静态路径是否真实可访问”——建议每次改完配置，用 curl -I http://localhost/jquery.js 看响应头里的 Content-Length 和 200 OK，再检查 Nginx error log 里有没有 open() "/var/www/..." failed (13: Permission denied) 这类线索。动静分离跑通容易，跑稳靠的是路径、权限、缓存这三件事盯死。
