Flowbite折叠导航栏Vite本地正常，部署至Vercel后移动端菜单失效

使用Flowbite默认导航栏，该导航栏在React+Vite本地环境中正常工作，但部署到Vercel后，移动端的菜单按钮无法展开或收起导航菜单。以下是我的配置文件：

package.json #

{  
  "name": "apis",  
  "private": true,  
  "version": "0.0.0",  
  "type": "module",  
  "scripts": {    
    "dev": "vite",    
    "build": "vite build",    
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",    
    "preview": "vite preview"  
  },  
  "dependencies": {    
    "flowbite": "^2.2.1",    
    "flowbite-react": "^0.7.2",    
    "react": "^18.2.0",    
    "react-dom": "^18.2.0",    
    "react-router-dom": "^6.21.0"  
  },  
  "devDependencies": {    
    "@types/react": "^18.2.37",    
    "@types/react-dom": "^18.2.15",    
    "@vitejs/plugin-react-swc": "^3.5.0",    
    "autoprefixer": "^10.4.16",    
    "eslint": "^8.53.0",    
    "eslint-plugin-react": "^7.33.2",    
    "eslint-plugin-react-hooks": "^4.6.0",    
    "eslint-plugin-react-refresh": "^0.4.4",    
    "postcss": "^8.4.32",    
    "tailwindcss": "^3.3.6",    
    "vite": "^5.0.0"  
  }
}

tailwind.config.js #

/** @type {import('tailwindcss').Config} */
export default {  
  content: [    
    "./index.html",    
    "./src/**/*.{js,ts,jsx,tsx}",    
    "./app/**/*.{js,ts,jsx,tsx,mdx}",    
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",    
    "./components/**/*.{js,ts,jsx,tsx,mdx}",    
    "node_modules/flowbite-react/lib/esm/**/*.js",  
  ],  
  theme: {    
    extend: {      
      colors: {        
        ivory: "#f3ece4",        
        beige: "#e8dccc",        
        void: "#373234",        
        cherry: "#d84339",        
        teal: {          
          50: "#f2f9f9",          
          100: "#ddeff0",          
          200: "#bfe0e2",          
          300: "#92cace",          
          400: "#5faab1",          
          500: "#438e96",          
          600: "#3b757f",          
          700: "#356169",          
          800: "#325158",          
          900: "#2d464c",          
          950: "#1a2c32",        
        },      
      },    
    },  
  },  
  plugins: [require("flowbite/plugin")],
};

vercel.json #

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

vite.config.js #

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react-swc'
https://vitejs.dev/config/
export default defineConfig({plugins: [react()],>! })

请问我遗漏了什么配置或步骤？

1. 修复vite.config.js语法错误 #

你的vite.config.js存在无效代码（直接暴露的注释链接、多余符号>!），这会导致构建配置异常，修正后应为：

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

2. 确保Flowbite交互脚本正确加载 #

Flowbite的移动端菜单依赖其核心JS文件，需要在项目入口文件（如main.jsx/main.tsx）中显式导入：

import 'flowbite/dist/flowbite.min.js'

避免生产环境下Tree Shaking误删交互逻辑。

3. 优化Vite构建依赖配置 #

在vite.config.js中添加依赖优化规则，确保Flowbite相关包被正确处理：

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ['flowbite', 'flowbite-react']
  }
})

4. 调整Tailwind Content路径 #

将tailwind.config.js中的Flowbite组件路径简化，确保样式被完整生成：

content: [
  "./index.html",
  "./src/**/*.{js,ts,jsx,tsx}",
  "./node_modules/flowbite-react/**/*.js"
],

5. 检查Vercel构建日志 #

前往Vercel部署控制台查看构建日志，确认是否存在依赖安装失败、构建报错等问题。若有异常，可删除本地node_modules和package-lock.json后重新安装依赖，再触发部署。

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