Vercel部署React+TypeScript项目报错：未找到build输出目录

问题根源 #

你的项目基于Vite构建，Vite默认的构建输出目录是dist，但Vercel平台默认会查找名为build的输出目录，两者路径不匹配导致部署报错。

解决方案（两种二选一即可） #

方案一：修改Vercel平台配置，指定输出目录为dist #

• 登录Vercel控制台，找到你的目标项目
• 进入项目的「Settings」页面，选择「Build & Development Settings」选项
• 在「Output Directory」输入框中填写dist
• 保存配置后，重新触发项目部署

方案二：修改Vite配置，让构建输出到build目录 #

打开项目根目录下的vite.config.js，添加build配置项指定输出目录：

import react from "@vitejs/plugin-react"
import * as path from "path"
import { defineConfig } from "vite"

// https://vitejs.dev/config/
export default defineConfig(async ({ mode }) => {
  return {
    plugins: [react()],
    resolve: {
      alias: [{ find: "@", replacement: path.resolve(__dirname, "./src") }],
    },
    optimizeDeps: {
      esbuildOptions: {
        // Node.js global to browser globalThis
        define: {
          global: "globalThis",
        },
      },
    },
    build: {
      outDir: "build" // 指定构建输出目录为build
    }
  }
})

修改完成后，提交代码到仓库，Vercel会自动重新部署。

额外检查步骤 #

在尝试部署前，先在本地执行构建命令：

npm run build
# 或
yarn build

确认根目录下生成了对应的输出目录（dist或build），确保构建命令本身能正常执行，排除本地构建失败的问题。

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