try_files $uri $uri/ /index.html;用于spa路由，需置于location /块内，配合root指向dist目录；api和静态资源须前置拦截，子路径部署需前后端base路径与nginx alias一致。
用 try_files $uri $uri/ /index.html; 这一行就能让 Nginx 正确支持前端单页应用（SPA）的路由，前提是它放在正确的 location 块里，并配合好路径和优先级规则。
核心写法与执行逻辑
这行指令按顺序检查三项：
-
$uri：查找请求路径对应的真实文件，比如/js/app.js、/logo.png，存在就直接返回 -
$uri/：再查是否为真实目录，比如/assets/，避免访问带斜杠的路径时出错 -
/index.html：前面两项都不匹配时，内部重写请求到根目录下的index.html，URL 不变，由前端 JS 解析当前路径并渲染视图
必须放在 location / 块中
不能把 try_files 写在 server 块顶层，必须包裹在 location / { ... } 里，并搭配 root 指向构建产物根目录：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
root /var/www/my-app;—— 指向含index.html的 dist 目录（不是文件路径） - 推荐显式加
index index.html;，防止某些场景下 fallback 失效 - 不要用
alias替代root在根路径部署中，否则路径拼接会异常
避免 API 和静态资源被错误兜底
如果后端接口走 /api/ 或有特殊路径，必须提前拦截，否则会被 try_files 拦下来返回 HTML：
-
location /api/ { proxy_pass http://backend/; }—— 放在location /之前，利用最长前缀匹配优先命中 -
location ~* \.(js|css|png|jpg|svg|woff2?|ttf|eot)$ { expires 1y; }—— 精准匹配静态资源后缀，加缓存头，也要放在location /前 - 确保构建产物中静态文件名带哈希（如
app.a1b2c3.js），才能安全启用长期缓存
子路径部署要同步适配
若应用部署在 https://example.com/admin/ 这类子路径，前后端配置必须一致：
- 前端设置
base: "/admin/"（Vue）或basename="/admin/"（React Router v6+） - Nginx 使用
alias，且末尾带斜杠：location /admin/ { alias /var/www/my-app/; } -
try_files中兜底路径写成/admin/index.html，而不是/index.html - 多个子应用（如
/shop/、/user/）需各自独立location块，互不干扰
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
