将静态HTML、CSS、JS文件部署到Vercel时出现404错误

以下是针对部署完成但页面404问题的排查和解决步骤：

• 检查入口文件名
  Vercel默认以index.html作为静态项目的首页入口，如果你的主HTML文件命名不是这个（比如main.html、home.html），会直接返回404。把主HTML文件重命名为index.html，并确保它放在项目根目录下，不要嵌套在子文件夹里。

• 确认项目结构与Vercel配置
  如果你的静态文件放在子目录（比如src/文件夹），需要告诉Vercel去哪里找入口文件：
  在项目根目录创建vercel.json文件，添加以下配置：

  {
    "buildCommand": "echo 'Skip build'",
    "outputDirectory": "." // 如果文件在src里就改成"src"
  }
  

  同时，在Vercel项目的"Build & Development Settings"中，将"Framework Preset"设置为Static HTML，避免框架预设自动执行不必要的构建流程。

• 验证部署文件是否被正确包含
  进入Vercel的项目部署详情页，查看"Deployment Files"板块，确认index.html、CSS文件和图片都被列在其中。如果有文件缺失，检查项目根目录的.gitignore文件，确保没有误排除这些静态资源（比如不要写*.html、*.css这类规则）。

• 强制刷新清除缓存
  浏览器可能缓存了旧的错误页面，尝试用快捷键强制刷新：Windows/Linux按Ctrl+Shift+R，Mac按Cmd+Shift+R，或者用无痕模式打开部署后的链接。

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