微前端部署中，子应用html入口需禁用强缓存，静态资源可启用1年强缓存；须按路径精确配置nginx location块、独立try_files回退及静态资源alias，避免缓存与路由冲突。
微前端架构中，各子应用通常独立构建、独立部署，其 HTML 入口文件（如 app1/index.html、app2/index.html）是运行时加载的关键起点。Nginx 本身不支持“动态生成 HTML”或“服务端组装”，但可通过合理配置缓存策略与路由规则，在保证更新即时性的同时实现高效分发——核心在于：**每个子应用的入口 HTML 必须禁用强缓存，而其他带哈希的静态资源（JS/CSS/图片）可安全启用长期缓存**。
精准识别并隔离各子应用入口 HTML
微前端常见部署结构为路径前缀区分（如 /app1/、/app2/），需避免全局 location = /index.html 配置误覆盖所有子应用。应按路径精确匹配：
- 为每个子应用定义独立 location 块，例如：
location = /app1/index.html { add_header Cache-Control "no-cache, no-store, must-revalidate"; } - 若子应用使用根路径式部署（如
app1.example.com/index.html），则在对应 server 块内配置location = /index.html - 禁止将缓存控制指令写在通用
location /块中，否则可能被 try_files 或正则规则覆盖
确保子应用静态资源走强缓存，且路径可区分
子应用构建产物中，JS/CSS 文件名含内容哈希（如 main.8a3f2d.js），因此可放心启用 1 年强缓存。关键是让 Nginx 正确识别并匹配这些资源：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 对通用静态后缀统一配置（推荐放在子应用 location 外层）：
location ~* \.(js|css|png|jpg|gif|svg|woff2?)$ { expires 1y; add_header Cache-Control "public, immutable"; } - 若子应用静态资源路径含前缀（如
/app1/static/），建议配合alias指令避免 root 拼接错误：location ^~ /app1/static/ { alias /data/apps/app1/dist/static/; expires 1y; } - 务必确认该 location 的优先级高于通用
location /，防止被 try_files 回退干扰
解决微前端场景下的路由 fallback 冲突
主应用和子应用都可能使用 BrowserRouter，需各自处理 404 回退。错误配置会导致子应用 HTML 被主应用接管，失去独立缓存控制能力：
- 主应用（如
location /）保留：try_files $uri $uri/ /index.html; - 子应用路径（如
location /app1/）必须单独配置：try_files $uri $uri/ /app1/index.html; - 避免子应用 location 使用
root+index index.html，否则无法触发 try_files 中的/app1/index.htmlfallback - 子应用的
index.html必须物理存在于对应目录下（如/data/apps/app1/dist/index.html），不可依赖模板渲染
应对微信等特殊环境的强制刷新需求
微信内置浏览器对 HTML 缓存异常顽固，即使设置了 no-cache 仍可能复用旧版本。此时需叠加服务端时间戳干预：
- 在子应用 location 块中添加：
add_header Last-Modified $date_gmt;<br>add_header ETag "";<br>if_modified_since off;
- 配合客户端在请求 URL 后追加时间戳参数（如
/app1/index.html?t=1718654220），Nginx 不需解析参数，仅需确保该请求不被通用正则规则拦截即可 - 注意：此方案需前端主动构造 URL，且不能影响子应用自身的路由逻辑（建议由主应用加载器注入）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
