Create React App部署至Vercel失败：Command "yarn run build" exited with 1问题排查与解决求助

一、为什么Vercel会执行yarn run build而不是npm？ #

Vercel会自动根据你的项目锁文件选择包管理器：

• 如果仓库里存在yarn.lock，它会默认使用Yarn；
• 如果存在package-lock.json（npm生成的锁文件），则使用npm。

你本地用npm构建但Vercel用Yarn，大概率是你的Git仓库里不小心提交了yarn.lock文件（可能之前用过Yarn或误生成）。

解决方法：

• 本地删除yarn.lock文件，提交该删除操作到Git仓库并推送到远程，重新触发Vercel部署后，它会自动切换为使用npm；
• 或者手动强制指定：在Vercel项目的Settings > General > Build & Development Settings里，把Install Command设为npm install，Build Command设为npm run build。

二、构建失败的核心原因：CI模式下警告被当作错误处理 #

你本地构建没问题，但Vercel上失败，是因为Vercel默认会设置process.env.CI = true，而react-scripts在CI环境下会把所有ESLint警告升级为错误，导致构建终止。从错误日志看，你的代码存在以下几类ESLint规则问题：

具体问题与修复方案：

1. 未使用的变量/导入（比如BrowserRouter、Navigate、Login等）：

   • 直接删除那些导入了但完全没用到的语句，这是最规范的做法；
   • 如果是暂时不用以后会用到，可以在变量前加注释临时忽略：/* eslint-disable-next-line @typescript-eslint/no-unused-vars */。

2. img标签缺少alt属性：

   • 给所有<img>添加alt属性：装饰性图片用空字符串alt=""，有实际内容的图片写描述性文本，比如<img src="user-avatar.jpg" alt="用户个人头像">。

3. 数组回调函数缺少返回值（array-callback-return警告）：

   • 确保filter、map这类数组方法的回调函数有明确的返回值，比如：

     // 错误写法：块级函数没写return
     const filteredItems = items.filter(item => {
       item.status === 'active'
     });
     // 正确写法
     const filteredItems = items.filter(item => item.status === 'active');
     // 或者带return的块级写法
     const filteredItems = items.filter(item => {
       return item.status === 'active';
     });
     

4. 使用了非严格相等运算符（eqeqeq警告）：

   • 把!=替换成!==，遵循ESLint的严格相等规则，避免隐式类型转换带来的bug。

临时应急方案（不推荐长期使用） #

如果你暂时没时间修复所有ESLint警告，可以修改package.json的build脚本，强制关闭CI模式的严格检查：

"scripts": {
  "build": "CI=false react-scripts build"
}

这样即使有警告，构建也能完成，但长期来看还是建议修复所有问题，保证代码质量。

最后检查 #

确认你在Vercel的Settings > Environment Variables中配置了所有本地项目用到的环境变量，并且勾选了Preview和Production环境，避免因环境变量缺失导致的其他问题。

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