前端路由重写时 Nginx URL 重写怎么配-Nginx-PHP中文网

本质是nginx按真实路径查找而spa路由由前端js接管，需用try_files $uri $uri/ /index.html将未匹配请求兜底至index.html，使前端路由接管渲染。

前端路由重写时 nginx url 重写怎么配

前端单页应用（SPA）用历史模式（history mode）时，直接访问非根路径或刷新页面会 404，本质是 Nginx 没找到对应文件——因为那些路径是前端路由，后端根本没这些静态资源。解决核心就一条：让所有非静态资源请求都 fallback 到 index.html，由前端 JS 自己解析路由。

基础配置：处理 SPA 路由回退

这是最常用、最关键的配置：

location / { } 块内必须用 try_files $uri $uri/ /index.html;
$uri 先检查真实文件（如 /js/app.js、/logo.png），命中即返回
$uri/ 检查是否为目录（比如访问 /about/ 且该目录存在 index.html）
都失败时，统一返回 /index.html，交由前端 router 处理

非根路径部署：注意 root 和 alias 的区别

如果前端项目部署在子路径下（比如 https://example.com/admin/），不能简单改 root：

面向设计的AXUI前端框架表单

面向设计的AXUI前端框架表单是一款包含表格、列表、弹窗等的AXUI前端框架表单下载。

下载

root /opt/dist; + location /admin/ { } → 实际找 /opt/dist/admin/xxx，错
应改用 alias：location /admin/ { alias /opt/dist/; try_files $uri $uri/ /index.html; }
alias 会把 /admin/ 替换掉，请求 /admin/js/app.js 就去读 /opt/dist/js/app.js

静态资源缓存与安全头（推荐加）

提升体验和安全性，顺手加上：

对常见静态资源（js/css/img/svg 等）设置长期缓存：expires 30d; + add_header Cache-Control "public, max-age=2592000";
加基础安全响应头：add_header X-Content-Type-Options "nosniff";、add_header X-Frame-Options "SAMEORIGIN";
避免误配导致跨域或 MIME 类型错误

多环境或设备适配（按需）

一个域名服务 PC 和移动端不同构建产物：

用 $http_user_agent 判断终端类型
在 location / { } 内写 if 分支：if ($http_user_agent ~* "(mobile|android|iphone|ipad)") { root /opt/dist/mobile; }
注意：if 在 location 中可用，但不建议在 server 级别滥用

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！