Vue项目Nginx部署时刷新非根路径404，需配置try_files $uri $uri/ /index.html回退至index.html；区分静态资源与API路由，静态资源直接返回，/api/单独proxy_pass代理，确保Vue Router正常接管。
Vue 项目采用前端路由（如 Vue Router 的 history 模式）时，如果直接通过 Nginx 托管，刷新非根路径（例如 /user/profile）会返回 404 —— 因为 Nginx 默认按真实文件路径查找，而该路径在服务端并不存在。解决方法是让所有非静态资源请求都回退到 index.html，由 Vue Router 在前端接管路由。核心就是 try_files 指令。
配置 location 块匹配前端路由
在 Nginx 的 server 配置中，需明确区分静态资源和单页应用的路由逻辑：
- 优先匹配
/static/、/img/、.js、.css等真实存在的静态资源，直接返回文件 - 其余请求（包括所有 history 路由路径）统一交由
index.html处理
典型配置如下：
location / {
try_files $uri $uri/ /index.html;
}
其中：
$uri 尝试匹配请求路径对应的真实文件（如 /about.js）
$uri/ 尝试匹配同名目录（如 /assets/）
/index.html 是兜底项——仅当以上都失败时才触发，确保 Vue Router 可启动
避免静态资源被错误回退
若项目构建后资源带哈希（如 app.abc123.js），且你已将 index.html 中的资源引用设为相对路径或 public 目录下托管，Nginx 必须能正确命中这些文件。常见疏漏：
立即学习“前端免费学习笔记（深入）”；
- 未设置
root或alias，导致$uri查找路径错误 - 静态资源放在子目录（如
/dist），但root指向了上层，造成 404
推荐显式声明根目录：
root /var/www/my-vue-app/dist;
location / {
try_files $uri $uri/ /index.html;
}
处理 API 代理与前端路由共存
开发时常用 vue.config.js 的 devServer.proxy，但生产环境需由 Nginx 统一代理 API 请求。此时要避免 API 路径也被 try_files 回退：
- 为 API 单独配置
location /api/块，并用proxy_pass转发到后端 - 该 location 会优先于
/匹配，因此try_files不会干扰接口请求
示例：
location /api/ {
proxy_pass https://backend.example.com/;
proxy_set_header Host $host;
}
location / {
root /var/www/my-vue-app/dist;
try_files $uri $uri/ /index.html;
}
验证与调试技巧
配置完成后，可通过以下方式确认行为符合预期：
- 访问
/favicon.ico或/static/logo.png：应返回对应文件，状态码 200 - 访问
/nonexistent.txt：应返回 404（未被回退，因index.html不匹配） - 访问
/user/edit（任意前端路由）：应返回index.html内容，状态码 200，且浏览器地址栏保持原路径
如出现循环重定向或空白页，检查：
– root 路径是否拼写正确，是否存在 index.html
– 是否遗漏分号导致语法错误（Nginx 对标点敏感）
– 日志中是否有 open() "/path/index.html" failed 类报错
