在Vite+React项目中引入js-big-decimal出现504错误求助

核心解决方案 #

• 停止当前运行的开发服务器（按 Ctrl+C 终止进程）
• 删除Vite的预构建缓存目录：直接删除项目根目录下的 node_modules/.vite 文件夹
• 重新启动开发服务器：执行 npm run dev

如果上述方法无效，尝试完整重置步骤 #

• 终止开发服务器后，执行以下命令清除缓存并重新安装依赖：

  # 清除npm缓存
  npm cache clean --force
  # 删除node_modules和锁文件
  rm -rf node_modules package-lock.json
  # 重新安装依赖
  npm install
  

• 再次启动开发服务器：npm run dev

临时调试方案（不推荐长期使用） #

如果需要临时绕过缓存验证，可以在Vite配置中禁用依赖预构建缓存：

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

export default defineConfig({
  plugins: [react()],
  server: {
    port: 8000,
  },
  optimizeDeps: {
    cache: false // 禁用预构建缓存
  }
});

注意：禁用缓存会降低开发服务器启动速度，问题解决后建议移除该配置。

问题原因 #

Vite在开发模式下会预构建第三方依赖以提升启动和热更新速度。安装新依赖（如js-big-decimal）后，预构建的缓存文件未同步更新，导致Vite无法找到最新的预构建资源，从而抛出Outdated Optimize Dep错误。清理缓存后，Vite会重新对所有依赖进行预构建，解决资源不匹配的问题。

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