root指令必须直接指向dist目录本身，如root /home/app/dist；错误指向上级目录或添加多余层级会导致静态资源404、白屏或路由刷新404；spa需配合try_files $uri $uri/ /index.html实现路由兜底。
root 指令必须直接指向前端打包后 dist 目录本身，不能指向上级目录，也不能带多余路径层级；否则静态资源 404、页面白屏或刷新路由报 404 就是大概率事件。
root 必须精准落到 dist 目录
假设 Vue 或 Vite 项目构建后生成 /home/app/dist/，里面包含 index.html、assets/、favicon.ico 等，那么 Nginx 配置中：
- ✅ 正确：
root /home/app/dist;（末尾有无/均可） - ❌ 错误：
root /home/app;—— 访问/会找/home/app/index.html，但实际在/home/app/dist/index.html - ❌ 错误：
root /home/app/dist/; index dist/index.html;—— 这会导致/assets/main.js被解析为/home/app/dist/dist/assets/main.js，路径多了一层
配合 try_files 实现 SPA 路由兜底
单页应用（Vue Router history 模式、React Router v6+ 等）依赖前端 JS 控制路由，Nginx 默认不会把 /user/profile 这类非真实文件的路径返回 index.html，所以必须加：
try_files $uri $uri/ /index.html;- 这行必须放在
location / { ... }块内，且在root和index之后 - 它表示：先尝试找真实文件 → 再找目录索引 → 最后 fallback 到
/index.html（由 root + /index.html 拼出完整路径）
子路径部署（如 /admin/）要同步调整构建配置
如果想通过 https://example.com/admin/ 访问该前端，不能只靠 Nginx 的 location /admin/ + root，因为 root 是拼接逻辑：
- ❌ 错误做法：
location /admin/ { root /home/app/dist; }→ 请求/admin/会去找/home/app/dist/admin/index.html（不存在） - ✅ 正确做法：
– 构建时设置 publicPath/base 为"/admin/"（Vite:base: "/admin/"；Vue CLI:publicPath: "/admin/"）
– Nginx 中仍用root /home/app/dist;，但 location 改用alias或保持location /admin/并重写 try_files
常见位置示例（Linux 环境）
多数生产部署使用这些路径，注意权限和 SELinux（如启用）是否允许 Nginx 读取：
-
root /usr/share/nginx/html;—— Nginx 默认路径，适合快速验证，把 dist 内容复制进去即可 -
root /opt/myapp/dist;—— 推荐用于自定义项目，结构清晰，便于维护 -
root /var/www/myapp/dist;—— 符合 Linux FHS 规范，也常见于运维习惯
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
