微前端架构中需为主应用和各子应用分别配置独立location块，主应用用root+try_files $uri $uri/ /index.html，子应用用alias+try_files $uri $uri/ /prefix/index.html，并前置静态资源与api代理规则避免误兜底。
在前端微应用架构（如 qiankun、micro-app、icestark）中，主应用与子应用通常共存于同一 Nginx 服务下，且各自拥有独立路由空间。此时 try_files 的配置不能简单套用单页应用（SPA）的 location / { try_files $uri $uri/ /index.html; } 模式——否则会导致子应用路径被主应用兜底、资源加载错乱、甚至跨应用路由冲突。
区分主应用与子应用的 location 路径
微应用架构依赖明确的路径前缀隔离（例如主应用在 /，子应用 A 在 /app-a/，子应用 B 在 /app-b/）。Nginx 必须为每个应用单独定义 location 块，并各自配置 try_files：
-
主应用（根路径）：通常部署在
/，负责加载微前端框架和子应用入口 -
子应用（带路径前缀）：必须使用
alias+ 独立try_files，且兜底路径需与部署路径对齐
示例配置：
location / {
root /var/www/main-app;
try_files $uri $uri/ /index.html;
}
<p>location /app-a/ {
alias /var/www/sub-app-a/;
try_files $uri $uri/ /app-a/index.html;
}</p><p>location /app-b/ {
alias /var/www/sub-app-b/;
try_files $uri $uri/ /app-b/index.html;
}</p>
注意：alias 后路径末尾必须有斜杠，try_files 中的兜底项（如 /app-a/index.html）是相对于 alias 指向目录的路径，不是服务器根目录。
静态资源请求优先匹配，避免误兜底
微应用构建产物中常含 /app-a/static/js/xxx.js 等资源路径。若未显式拦截，可能因 $uri 不匹配而落入 /app-a/index.html，造成 JS/CSS 404。
建议为通用静态后缀添加高优先级 location（放在所有应用 location 之前）：
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
location ~* \.(js|css|json|png|jpg|jpeg|gif|ico|svg|woff2?|ttf|eot|map)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
该规则会提前响应真实存在的静态文件，不进入后续 try_files 流程。
API 代理与子应用通信路径隔离
微应用常通过 fetch 请求自身专属 API（如 /app-a/api/users）或主应用提供的网关接口（如 /api/gateway/app-a）。这些路径必须被独立 location 拦截，防止被 try_files 错误兜底：
- 子应用专属接口：用前缀匹配并
proxy_pass到对应后端 - 主应用统一网关：可复用
/api/规则，但需在子应用 location 外层定义
示例：
location /app-a/api/ {
proxy_pass http://sub-app-a-backend/;
proxy_set_header Host $host;
}
<p>location /api/ {
proxy_pass <a href="https://www.php.cn/link/df1913f2b19b4b3cc1181f0f3327515c">https://www.php.cn/link/df1913f2b19b4b3cc1181f0f3327515c</a>;
}</p>
Nginx 匹配顺序保证 /app-a/api/ 优先进入代理逻辑，不会落到 location /app-a/ 的 try_files 中。
子应用 HTML 入口与 base href 协同
子应用的 index.html 中必须设置正确的 <base href="/app-a/">（Vite 用 base: "/app-a/"，Vue CLI 用 publicPath: "/app-a/"），否则 JS 加载的相对路径（如 ./static/js/app.js）会错误解析为 /static/js/app.js（根路径），而非 /app-a/static/js/app.js。
这与 Nginx 的 alias 和 try_files 配置形成闭环：前端 base 控制资源请求路径，Nginx location 控制该路径如何被服务。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
