最稳妥的维护页方案是纯html静态页，需包含5个硬性要素：标题含“维护”、robots设为noindex、明确写出北京时间恢复时间、页脚带last-updated时间戳、字体不小于16px，并配置正确路由与cache-control响应头。
直接用纯 HTML 静态页最稳妥，不依赖 JS、不靠 HTTP 状态码，99% 的 CDN 和反向代理都能原样透出。
为什么不能只写个 503 状态码再配个 error_page
CDN（如 Cloudflare）和 Nginx 默认会拦截并覆盖你的响应体——你写的 maintenance.html 根本不会被用户看到。Nginx 还得额外加 proxy_intercept_errors on，否则 error_page 503 形同虚设。监控工具（比如 UptimeRobot）也会把 503 当作故障告警，而不是计划内维护。
必须包含的 5 个硬性要素
缺一不可，否则用户困惑、爬虫误收录、运维难追溯：
-
<title></title>文字里必须含“维护”或“暂时不可用”，禁止出现Error 503、Service Unavailable这类词 -
<meta name="robots" content="noindex">放在里，防搜索引擎当首页抓取 - 明确写出预计恢复时间，格式为
2026-08-05 10:00（北京时间），不写“稍后”“尽快” - 页脚加一行
last-updated: 2026-08-03T17:58:00+08:00（当前时间戳），方便手动更新时留痕 - 字体大小至少
16px，小屏上文字太小会被当成加载失败
部署时最容易踩的两个坑
90% 的维护页失效都卡在这两步：
- 路径没对齐：Nginx 要用
try_files /maintenance.html =404，Apache 要在.htaccess里加RedirectMatch 200 ^/.*$ /maintenance.html，确保所有路径（包括/api/xxx、/static/js/app.js）都命中该页 - 缓存没禁掉：服务器响应头必须带
Cache-Control: no-cache, no-store, must-revalidate，否则浏览器或 CDN 可能缓存旧版维护页，改完时间也不生效
一个可直接复制粘贴的最小可用版本
保存为 maintenance.html，丢到网站根目录，再按上一条配好路由和响应头即可：
<meta charset="UTF-8"><meta name="robots" content="noindex"><meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Expires" content="0"><title>网站正在维护中</title><style>
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; color: #333; text-align: center; font-size: 16px; }
.container { max-width: 600px; margin: 5vh auto; padding: 2rem; }
h1 { font-size: 1.8rem; margin: 0 0 1rem 0; }
.time { font-weight: bold; color: #1976d2; }
footer { margin-top: 2rem; font-size: 0.9rem; color: #666; }
</style><div class="container">
<h1>网站正在维护中</h1>
<p>我们正在升级系统，以提供更稳定的服务。</p>
<p>预计恢复时间：<span class="time">2026-08-05 10:00（北京时间）</span></p>
<p>如有紧急问题，请邮件联系：support@example.com</p>
</div>
<footer>last-updated: 2026-08-03T17:58:00+08:00</footer>
注意：恢复时间、邮箱、页脚时间戳这三处必须每次手动更新；不要加任何 <script></script> 或自动跳转逻辑——静态页就该老老实实待着。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
