部署CSS布局项目到Netlify与Vercel时出现404错误及缓存问题

通用排查点 #

• 确认项目根目录下存在index.html文件，这是静态站点的默认入口。如果入口文件名不是index.html，需在平台配置中指定自定义入口路径。
• 检查项目是否误配置了构建命令：纯静态HTML/CSS/JS项目无需构建流程，若package.json或平台设置中填写了多余的build命令，会导致平台尝试执行不存在的构建步骤，引发缓存异常或404。

Vercel 平台修复步骤 #

1. 调整构建配置
   进入项目「Settings」→「Build & Development Settings」，将Build Command留空，Output Directory设置为项目根目录（填写./即可）。
2. 清除缓存并重部署
   在「Deployments」页面找到最近的部署记录，点击「Redeploy」并勾选「Clear Build Cache」选项，重新触发部署。
3. 路由配置（按需）
   若项目包含多页面或自定义路由，在根目录创建vercel.json文件，添加以下规则确保路由正确映射：

   {
     "routes": [
       { "src": "/(.*)", "dest": "/$1" }
     ]
   }
   

Netlify 平台修复步骤 #

1. 设置发布目录
   进入项目「Site settings」→「Build & deploy」→「Continuous deployment」→「Build settings」，将Publish directory设为./，Build command留空。
2. 配置重写规则
   在根目录创建_redirects文件，添加以下规则避免路由导致的404：

   /* /index.html 200
   

3. 强制重新部署
   在「Deploys」页面点击「Trigger deploy」→「Deploy site」，强制拉取最新代码并部署。

额外注意事项 #

• 检查.gitignore文件，确保没有忽略index.html、CSS/JS目录等关键静态资源，否则平台拉取代码时会缺失文件导致404。
• 本地Go Live是直接启动静态服务器加载文件，而部署平台依赖配置规则处理资源，需确保平台配置与项目结构匹配。

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