root 是拼接路径，alias 是路径替换；配置 location /static/ 时误用 root 会导致 404；gzip 和缓存需按文件类型差异化设置；正则 location 应精简避免性能损耗；跨域静态资源需补全 MIME 类型与 CORS 头。
location 匹配静态资源路径时，root 和 alias 的区别必须分清
很多人配置完 location /static/ 却发现 404，根本原因是把 root 和 alias 当成等价写法用了。它们行为完全不同：
-
root是拼接路径：请求/static/js/app.js→ 实际查找/var/www/html/static/js/app.js -
alias是路径替换：请求/static/js/app.js→ 实际查找/var/www/assets/js/app.js（前提是alias /var/www/assets/;）
典型错误写法：
location /static/ {
root /var/www/assets;
}这会导致 Nginx 去找 /var/www/assets/static/js/app.js，而你真正想映射的是 /var/www/assets/ 下的内容。
启用 gzip 压缩和缓存头，但别盲目加 expires
静态资源开启压缩和缓存能显著降低带宽消耗，但 expires 的值不能一概设为 1y。浏览器强缓存后，若文件内容更新但文件名没变，用户就看不到新版本。
- 对带哈希指纹的文件（如
main.a1b2c3.js），可放心用expires 1y; - 对无版本号的通用文件（如
logo.png、style.css），建议用expires 1h;或配合ETag+If-None-Match - 务必同时设置
gzip on;和gzip_types，否则 JS/CSS/JSON 等文本资源不会被压缩
示例：
gzip on;
gzip_types text/plain text/css application/javascript application/json;
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
expires 1h;
add_header Cache-Control "public, immutable";
}
避免 location 正则过度匹配导致性能下降
用 ~* 匹配所有静态后缀看似方便，但每次请求都要遍历正则表，尤其当有多个 location ~ 块时，Nginx 会按顺序逐个尝试，开销明显。
- 优先使用前缀匹配：
location /images/ { ... }比location ~* \.png$更快 - 如果必须用正则，把高频后缀（如
.js、.css）放在前面，低频（如.webp）放后面 - 避免在
server级别写大量location ~，应归并到统一块中处理
更合理的写法：
location ^~ /static/ {
root /var/www/dist;
expires 1y;
}
location ~* \.(js|css|json|txt)$ {
add_header Content-Type text/plain;
}
跨域资源（如字体、WebAssembly）需显式允许 CORS
现代前端常加载 .woff2、.wasm 等资源，浏览器默认禁止跨域读取这些二进制类型，即使同域部署也可能因 MIME 类型或预检失败报错。
- 仅靠
add_header Access-Control-Allow-Origin "*";不够 —— 对font和wasm，还需Access-Control-Allow-Headers和Access-Control-Allow-Methods - Nginx 默认不给
.woff2设置正确Content-Type，要手动补全types块 - 注意：CORS 头不能出现在 304 响应中，所以搭配
expires时要小心缓存逻辑
最小可行配置：
types {
font/woff2 woff2;
application/wasm wasm;
}
location ~* \.(woff2|wasm|ttf|eot)$ {
add_header Access-Control-Allow-Origin "*";
add_header Access-Control-Allow-Methods "GET";
}
最易被忽略的是：静态资源路径配置后，没验证 try_files 是否干扰了真实文件查找；还有就是本地开发用 Webpack DevServer 代理时，Nginx 的 location 规则在生产环境可能因大小写、尾部斜杠、编码差异而失效。
