nginx 不支持单个 server 块内多路径多 root，需用 alias（推荐）、多 server 域名或反向代理实现；alias 要求 location 无尾斜杠、alias 路径有尾斜杠，并配合前端 publicpath 配置。
Nginx 本身不支持在一个 server 块里为多个路径配置多个 root。它的 root 指令作用域有限——只在 location / {} 或 server 级生效，且全局唯一。如果你写：
location /a {
root /var/www/a; # ❌ 实际无效（会被忽略）
}
location /b {
root /var/www/b; # ❌ 同样无效
}
Nginx 不会按预期把 /a/xxx 映射到 /var/www/a/a/xxx，而是沿用 server 或上级 location / 的 root，导致 404 或错乱。
真正可行的方案有三种，按推荐度排序：
✅ 用 alias 配置子路径项目（最常用）
适合：同一域名下通过不同前缀访问多个 SPA（如 example.com/app1/, example.com/app2/）
关键点：
-
alias后路径必须以/结尾（如/var/www/app1/，少斜杠会 404） -
location路径结尾不要加/（如location /app1，不是/app1/） -
try_files要指向该子项目的index.html（注意路径匹配）
示例：
location /app1 {
alias /var/www/app1/;
index index.html;
try_files $uri $uri/ /app1/index.html;
}
location /app2 {
alias /var/www/app2/;
index index.html;
try_files $uri $uri/ /app2/index.html;
}
⚠️ 前端构建时必须设置 publicPath: '/app1/'（Vue）或 base: '/app1/'（Vue Router/Vite），否则资源加载路径错误。
✅ 用多个 server 块配不同域名（最干净）
适合：有多个二级域名（如 app1.example.com, app2.example.com）
每个 server 独立 root，互不影响：
server {
listen 80;
server_name app1.example.com;
root /var/www/app1;
index index.html;
try_files $uri $uri/ /index.html;
}
server {
listen 80;
server_name app2.example.com;
root /var/www/app2;
index index.html;
try_files $uri $uri/ /index.html;
}
无需改前端路由配置，publicPath 保持 '/' 即可，部署最省心。
✅ 用反向代理 + 独立端口服务（适合开发或隔离强场景）
适合：项目间完全隔离、需独立进程、或已有本地服务（如 localhost:3001, localhost:3002）
Nginx 不直接托管静态文件，只做转发：
server {
listen 80;
server_name example.com;
location /app1/ {
proxy_pass http://127.0.0.1:3001/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
location /app2/ {
proxy_pass http://127.0.0.1:3002/;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}
前端仍需设 publicPath 和 base，但后端接口代理更灵活，适合调试或微前端混合架构。
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
