使用vercel.json部署React+Node全栈项目时依赖安装失败排查

核心问题分析 #

Vercel使用@vercel/static-build构建前端时，会优先执行默认的npm install命令，而非你写在client/package.json的build脚本里的安装逻辑，这就导致--legacy-peer-deps参数没生效，触发了@material-ui/core@4.x与React 18的peer依赖冲突。另外你之前的routes路径写错了（server下直接是server.js，不是server/src/server.js）。

两种可行解决方案 #

方案一：在vercel.json中指定前端的安装命令 #

直接在builds配置里给前端构建规则添加自定义的installCommand和buildCommand，覆盖Vercel的默认行为：

{
  "version": 2,
  "builds": [
    {
      "src": "client/package.json",
      "use": "@vercel/static-build",
      "config": {
        "installCommand": "npm install --legacy-peer-deps",
        "buildCommand": "npm run build"
      }
    },
    {
      "src": "server/package.json",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/.*",
      "dest": "/server/server.js"
    }
  ]
}

注意：把client/package.json里的build脚本改回纯构建命令："build": "react-scripts build"，避免重复执行安装步骤。

方案二：给前端项目添加.npmrc配置（更省心） #

在client文件夹根目录创建.npmrc文件，写入以下内容：

legacy-peer-deps=true

这样不管是本地开发还是Vercel部署，npm都会自动启用兼容旧peer依赖的模式，不需要修改任何命令或配置文件，一劳永逸。

额外验证步骤 #

1. 本地测试前端构建：cd client && npm install && npm run build，确认client/build文件夹正常生成
2. 后端要正确托管静态文件，在server/index.js中添加：

const path = require('path');
app.use(express.static(path.join(__dirname, '../client/build')));

3. 推送代码到Vercel后，查看构建日志，确认安装步骤已带上--legacy-peer-deps参数

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