前端多路由项目部署时 Nginx Root 如何配

Nginx部署前端多路由项目时，root仅指定静态资源根目录，关键靠try_files实现路由兜底；正确配置为root /var/www/myapp; + try_files $uri $uri/ /index.html;，确保刷新不报404。

前端多路由项目（比如 Vue Router 或 React Router 的 History 模式）部署到 Nginx，root 配置本身不决定路由行为，真正起作用的是 try_files 指令。root 只负责告诉 Nginx 静态文件放在哪，而多路由能否刷新不报 404，关键在于请求兜底逻辑。

root 的作用和正确写法

root 定义的是静态资源的根目录路径，Nginx 会把 location 匹配到的 URI 拼接到 root 路径后面去查找文件。

1. 例如：root /usr/share/nginx/html; + location /admin/ { ... } → 实际查找 /usr/share/nginx/html/admin/
2. 若项目打包后 dist 目录完整放在 /var/www/myapp/，就该写：root /var/www/myapp;
3. 结尾斜杠 / 不强制，root /var/www/myapp 和 root /var/www/myapp/ 效果一致

必须搭配 try_files 处理多路由

History 模式下，用户访问 /user/123 或刷新页面时，Nginx 默认尝试找 /user/123 对应的物理文件——但这个文件不存在，就会返回 404。解决方法是让所有未命中静态资源的请求都 fallback 到 index.html，由前端路由接管。

1. 标准写法：try_files $uri $uri/ /index.html;
2. $uri：先查真实文件（如 js/app.js、css/main.css）
3. $uri/：再查是否为目录（如访问 /about/）
4. /index.html：以上都不匹配时，返回根目录下的 index.html，保证 SPA 路由生效

常见错误配置与修正

以下写法看似合理，实则会导致子路由刷新失败或资源加载异常：

1. ❌ 错误：只写 root，没加 try_files → 刷新任意非根路径必 404
2. ❌ 错误：root /var/www/myapp/dist; + location / { ... } → 实际查找路径变成 /var/www/myapp/dist//index.html（双斜杠不影响，但语义冗余）
3. ✅ 推荐：root /var/www/myapp; + index index.html; + try_files $uri $uri/ /index.html;，dist 内容直接放 /var/www/myapp/ 下即可

多个前端项目共存时的 root 使用建议

如果一台服务器要跑多个前端项目，不推荐全靠一个 server 块内用不同 location + alias 来区分（易出路径歧义）。更清晰的做法是：

1. 每个项目独占一个 server 块，监听不同端口或域名
2. 每个 server 块里用独立的 root 指向各自 dist 根目录
3. 例如：server { listen 8081; root /var/www/app-a; ... try_files $uri $uri/ /index.html; }
4. 这样避免 root/alias 混用导致的路径拼接混乱，维护和排错都更直观