构建过程中如何展示自定义提示消息？处理运行时构建报错场景

• 定位错误触发逻辑
  找到项目中处理静态页面加载的核心文件（比如框架自带的服务器入口、自定义Express服务的路由处理代码），定位抛出"Invariant: failed to load static page"错误的代码段。

• 替换错误响应内容
  在错误捕获逻辑中，针对该特定错误返回自定义提示页面，示例代码如下：

  // Express服务错误处理中间件示例
  app.use((err, req, res, next) => {
    if (err.message.includes("failed to load static page")) {
      res.status(500).send(`
        <!DOCTYPE html>
        <html>
          <head>
            <meta charset="UTF-8">
            <title>站点更新中</title>
            <style>
              body { text-align: center; padding: 60px; font-family: system-ui, -apple-system, sans-serif; }
              h2 { color: #333; font-size: 2.2em; }
              p { color: #666; font-size: 1.1em; margin-top: 25px; }
            </style>
          </head>
          <body>
            <h2>站点正在更新维护</h2>
            <p>我们正在部署新版本，请每隔几分钟重新加载页面查看。</p>
          </body>
        </html>
      `);
    } else {
      next(err);
    }
  });
  

• 构建前后的静态页面占位（可选）
  如果构建过程会直接覆盖静态入口文件，可以通过npm脚本在构建前替换为维护页面，构建完成后恢复原文件：

  // package.json中修改scripts字段
  "scripts": {
    "prebuild": "cp public/maintenance.html public/index.html",
    "build": "your-original-build-command",
    "postbuild": "git checkout public/index.html"
  }
  

  需提前在public目录下创建maintenance.html，写入你的自定义提示内容。

内容的提问来源于stack exchange，提问作者sunknudsen