root指令必须精准指向vue项目dist目录的完整路径，如root /var/www/my-app/dist;，配合location和index使用，并加try_files $uri $uri/ /index.html支持history路由；子路径部署应改用alias。
root 指令在 Nginx 中用于设置请求的根目录，也就是静态文件的查找起点。部署 Vue 项目时，它必须精准指向 dist 目录本身（不是它的父目录），否则会出现 404、空白页或资源加载失败等问题。
关键：root 必须指向 dist 目录的完整路径
比如你打包后得到 /var/www/my-app/dist，那么配置中应写：
-
root /var/www/my-app/dist;✅ 正确 —— 请求/js/app.js会映射到/var/www/my-app/dist/js/app.js -
root /var/www/my-app;❌ 错误 —— 此时/js/app.js会去找/var/www/my-app/js/app.js，但实际文件在dist子目录里
注意 Windows 路径中的空格和引号
若 dist 在带空格的路径下（如 E:/Program Files/nginx/html/dist），Nginx 会把空格当作分隔符导致启动失败：
- 错误写法：
root E:/Program Files/nginx/html/dist; - 正确写法：
root "E:/Program Files/nginx/html/dist";（英文双引号包裹） - 或用正斜杠+引号：
root "E:/Program Files/nginx/html/dist";
配合 location 和 index 使用才生效
root 单独存在不干活，必须配合 location 块和 index 才能服务 Vue 的 index.html：
location / {
root /var/www/my-app/dist;
index index.html;
try_files $uri $uri/ /index.html; # 必加！支持 Vue Router history 模式
}
-
index index.html让 Nginx 知道访问目录时返回哪个文件 -
try_files $uri $uri/ /index.html是 SPA 的核心 —— 所有前端路由都 fallback 到index.html，由 Vue Router 处理
别和 alias 混用
如果要用子路径部署（比如 https://example.com/admin/），root 不适合，该用 alias：
-
location /admin/ { alias /var/www/admin/dist/; }—— 注意 alias 后路径末尾要加/ -
root是拼接路径，alias是替换路径，逻辑完全不同
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
