根本原因是Nginx未将子路由请求转发给index.html，而是直接查找文件系统路径；正确配置try_files指令并配合root/alias及Vue的publicPath/base设置即可解决。
Vue 项目用 history 模式部署到 Nginx 后，直接访问子路由（比如 /user/profile）或刷新页面就 404，根本原因不是 Vue 写错了，而是 Nginx 根本没把请求转给 index.html —— 它老老实实去文件系统里找 /user/profile 这个路径，当然找不到。
为什么 try_files 是最直接的解法
Vue 单页应用只有一个真实 HTML 入口：index.html。所有前端路由都是 JS 在浏览器端解析的，Nginx 不参与。所以只要确保：任何非静态资源请求（js/css/img 等已存在则直返，不存在就 fallback 到 index.html），都落到这个文件上即可。try_files 就是干这事的——它按顺序检查每个路径是否存在，最后兜底。
常见错误写法：try_files $uri /index.html;，看着对，但容易漏掉两个关键点：
- 没加
$uri/（带斜杠的目录形式），导致/user这类无后缀路径被跳过 -
/index.html的路径和实际root设置不匹配，比如root是/var/www/myapp，但你写了/index.html，Nginx 会去找/index.html（根路径），而不是/var/www/myapp/index.html
try_files 正确写法与 location 配置位置
必须写在具体的 location 块里，且要和 root 或 alias 配合。不能只写在 server 级别。
立即学习“前端免费学习笔记（深入）”；
示例（标准根目录部署）：
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
location / {
root /var/www/my-vue-app;
try_files $uri $uri/ /index.html;
}
如果部署在子路径（如 /admin），有两种等效写法：
- 用
alias（注意结尾斜杠）：location /admin/ { alias /var/www/my-vue-app/; try_files $uri $uri/ /index.html; }→ 这里/index.html实际指向/var/www/my-vue-app/index.html - 用
root+ 调整路径：location /admin/ { root /var/www; try_files $uri $uri/ /my-vue-app/index.html; }
⚠️ 关键区别：alias 替换整个匹配前缀，root 是拼接路径。写错会导致 404 或 500。
常见报错与排查步骤
改完配置后 nginx -t 报错或 reload 后仍 404，优先查这几点：
-
nginx -t失败？检查是否用了宝塔等面板插件——某些免费防护插件会拦截try_files指令，临时卸载再试 - 页面白屏、控制台大量
GET /xxx.js 404？说明静态资源路径不对 → 回头检查 Vue 项目的publicPath（Vue CLI）或base（Vue Router）是否和 Nginx 的location前缀一致 - 能打开首页，但子路由刷新 404？确认
try_files行末是/index.html，不是index.html（缺了开头斜杠） - 用
alias时访问/admin（不带尾斜杠）返回 404？这是 Nginx 行为，强制加斜杠或额外配一条location /admin { return 301 /admin/; }
Vue 侧必须同步调整的配置项
Nginx 只解决“请求怎么进”，Vue 自己得知道“资源从哪来”。否则 try_files 成功了，JS 还是去错地方加载 chunk。
- Vue CLI 项目：修改
vue.config.js中的publicPath，例如部署在/admin/，就设为'/admin/' - Vue Router：启用
history模式，并设置base: '/admin/' - Vite 项目：在
vite.config.ts中设base: '/admin/'
漏掉任一环，都会出现“Nginx 配对了，但页面空白/资源 404”的现象。这不是 Nginx 的锅，是前后端路径约定没对齐。
真正卡住人的往往不是 try_files 本身，而是它和 Vue 构建配置、Nginx root/alias、以及 URL 路径层级之间那几处细微的斜杠和前缀匹配关系。调一次，记三处。
