React(Vite)项目本地正常，部署Vercel后空白页及报错求助

问题描述 #

本地localhost运行正常，部署到Vercel后显示空白页，浏览器控制台报错：

index-3d1f8e86.js:126  Uncaught TypeError: fw.div is not a function at index-3d1f8e86.js:126:916

Vercel日志无内容，部署时选择构建框架为"Vite"，根目录设置为WEB-DEVELOPMENT/web-app/client，其余默认。

现有配置文件 #

client/vercel.json #

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/"
    }
  ]
}

注意：你贴的vite.config.js实际是Tailwind CSS配置文件 #

你提供的配置内容属于Tailwind CSS，应重命名为tailwind.config.js，而非vite.config.js，这是核心问题之一。

解决步骤 #

1. 创建正确的vite.config.js #

在client目录下创建vite.config.js，添加基础Vite配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: {
    outDir: 'dist', // 明确指定构建输出目录，Vite默认也是dist
  },
  // 如果部署后资源路径错误，可尝试设置base：
  // base: '/' // 根路径部署时用这个，子路径部署需对应调整
})

2. 修正Tailwind配置文件名 #

将原错误命名为vite.config.js的Tailwind配置文件重命名为tailwind.config.js，确保内容不变：

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {
      colors: {
        'light-blue-primary': '#4AC9FF',
        'light-blue-secondary':'#1098F7',
        'dark-blue-primary': '#001F3F',
        'dark-blue-secondary': '#0059A3',
        'light-green-primary': '#77D353',
        'light-green-secondary': '#47A620',
        'dark-green-primary': '#217F24',
        'dark-green-secondary': '#3EAB4D',
      },
      fontFamily:{
        titleFont: ['Poppins', 'sans-serif']
      }
    },
  },
  plugins: [],
}

3. 检查package.json构建脚本 #

确保package.json中包含正确的Vite构建命令：

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "preview": "vite preview"
}

4. 本地预演生产构建 #

执行以下命令，在本地模拟生产环境，排查是否能复现报错：

npm run build
npm run preview

如果本地预览也出现相同报错，说明问题出在构建配置或代码本身，而非Vercel部署环节：

• 检查是否使用了CSS-in-JS库（如styled-components、emotion），需确保Vite插件配置正确；
• 排查自定义组件或第三方依赖中是否存在未正确打包的代码，比如使用了未转译的ES语法。

5. 确认Vercel部署配置 #

• 根目录保持WEB-DEVELOPMENT/web-app/client不变；
• 构建命令默认会自动识别npm run build，无需手动修改；
• 输出目录确认是dist（与vite.config.js中的配置一致）。

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