nginx 的 root 应指向构建产物的父目录（如 /var/www/myapp），而非 dist/ 目录本身，以确保 / 映射到 dist/index.html、/assets/xxx 映射到 dist/assets/xxx，并配合 try_files $uri $uri/ /index.html; 支持 spa history 路由。
前端工程化项目（如 Vue CLI、Create React App、Vite 等）构建后，通常输出一个扁平化的静态资源目录（如 dist/），其中包含 index.html、assets/、js/、css/ 等子目录。Nginx 的 root 配置需精准指向该构建产物的**父目录**，而非直接指向 index.html，否则会导致资源 404 或路由 fallback 失效。核心原则是：让 Nginx 把请求路径自然映射到文件系统路径，同时兼顾单页应用（SPA）的 history 模式路由。
明确 root 指向构建产物的父目录
假设项目构建后生成 /var/www/myapp/dist/，其中包含 index.html 和 assets/ 等。Nginx 的 root 应设为 /var/www/myapp，而非 /var/www/myapp/dist。这样，访问 / 时 Nginx 查找 /var/www/myapp/dist/index.html；访问 /assets/main.js 时查找 /var/www/myapp/dist/assets/main.js —— 前提是 location 路径能正确拼接。
- 推荐配置方式：用
location /+root，并确保index index.html - 避免错误写法：
root /var/www/myapp/dist;—— 这会导致/解析为/var/www/myapp/dist/index.html，但/assets/xxx会尝试读取/var/www/myapp/dist/dist/assets/xxx（多了一层 dist）
用 location 匹配根路径并启用 SPA fallback
前端路由使用 history 模式时，刷新 /user/123 页面会触发 Nginx 查找对应路径文件。由于该路径实际不存在物理文件，必须将所有非资源请求回退到 index.html，由前端路由接管。
- 先匹配静态资源（
js、css、img、fonts、favicon.ico等），直接返回文件 - 再用
try_files $uri $uri/ /index.html;捕获其余请求，确保 SPA 路由可用 - 注意：此规则必须放在
location /块中，且不能与更具体的静态路径 location 冲突
适配不同构建输出路径的灵活方案
部分项目可能将构建产物输出到 build/、out/ 或带版本号的目录（如 dist-v1.2.0/）。此时不建议硬编码 root，可采用以下方式：
- 统一软链接：部署时创建指向最新构建目录的符号链接（如
ln -sf dist-v1.2.0 /var/www/myapp/current），Nginxroot固定为/var/www/myapp/current - 利用 alias 替代 root（仅限单 location）：若只服务一个前端项目，可用
location / { alias /var/www/myapp/dist/; }，但需手动补全index.html和处理子路径，灵活性较低 - 配合 CI/CD 自动更新配置：在发布脚本中替换 Nginx 配置中的 root 路径并重载，适合多项目隔离场景
验证与常见问题排查
配置生效后，重点验证三类请求是否正常：
-
根路径（
/）：返回index.html，状态码 200 -
静态资源（
/assets/app.js）：返回 JS 文件，Content-Type 正确，无 404 -
深层路由（
/dashboard/settings）：仍返回index.html（状态码 200），前端能正确解析路径
典型问题包括：Nginx 返回 403（目录无读权限）、404（root 路径多一层或少一层）、空白页（JS/CSS 路径 404 导致加载失败）、路由刷新 404（未配置 try_files 或 location 顺序错误）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
