根本原因是nginx未将非根路径请求兜底至index.html；需在location /中配置try_files $uri $uri/ /index.html，并确保api等特殊路径优先匹配。
Vue单页应用（SPA）用 History 模式部署时，刷新非根路径（如 /user、/admin/login）报 404，根本原因不是前端代码错了，而是 Nginx 没把请求交给 index.html。解决它最直接、最标准的方式，就是在 location 块里配对使用 try_files，同时确保 root 或 alias 指向正确。
基础结构：根路径部署的标准写法
适用于 Vue 项目构建产物放在 /var/www/my-vue-app/dist，且访问地址是 https://example.com/ 这类根域名场景：
-
必须在
location /块内配置，不能只写在server级别 -
root指向构建输出的根目录（含index.html） -
try_files $uri $uri/ /index.html;三段缺一不可：
–$uri匹配真实文件（如/js/app.js）
–$uri/匹配真实目录（如/assets/）
–/index.html是兜底项，内部重写，URL 不变 - 建议显式加上
index index.html;，保证根路径访问也正常
完整示例：
server {
listen 80;
server_name example.com;
root /var/www/my-vue-app/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
子路径部署：前后端路径必须严格对齐
如果 Vue 应用部署在 https://example.com/admin/，仅改 Nginx 不够，前端构建和路由配置也得同步：
-
前端要设 base：Vue CLI 用
publicPath: '/admin/'，Vite 用base: '/admin/'，Vue Router 传createWebHistory('/admin/') -
Nginx 推荐用
alias（结尾带斜杠），更直观安全：location /admin/ {<br> alias /var/www/my-vue-app/dist/;<br> try_files $uri $uri/ /admin/index.html;<br>}
注意：/admin/index.html中的/admin/是相对于alias路径拼接后的逻辑路径 - 不要混用
root和子路径兜底路径，容易错位导致 404 或 500
避免干扰：API 和静态资源需前置隔离
try_files 是“兜底”逻辑，但不能让它误捕获本该走代理或返回真实资源的请求：
-
所有 API 请求必须单独定义
location，比如：location /api/ {<br> proxy_pass http://127.0.0.1:3000/;<br> proxy_set_header Host $host;<br>}
因为 Nginx location 匹配按最长前缀优先，/api/会先于location /生效，自然绕过try_files -
静态资源（如
/static/、/uploads/）若由后端托管，也要单独配location，防止被 fallback 到 HTML -
favicon.ico 这类小资源可显式处理：
location = /favicon.ico { log_not_found off; return 204; }
验证是否生效的三个关键点
配置完 reload Nginx 后，快速检查以下三项：
- 直接访问一个 JS 文件（如
https://example.com/js/app.xxxx.js），响应应为 JS 内容，状态码 200，不是 HTML - 访问一个纯前端路由（如
https://example.com/user/profile），响应状态码应为 200，HTML 内容是index.html的源码 - 打开浏览器控制台，确认没有因资源路径错误导致的 404（说明
publicPath/base和 Nginx 配置一致）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
