执行npm run dev报错，Django+React项目Vite启动失败如何解决？

开发者阿泽

2026-6-26

问题描述

用Vite生成的前端模板，package.json位于frontend目录，dev脚本为vite，但执行npm run dev时报错。项目采用Django+React架构，使用Python虚拟环境，后端运行正常，已安装React相关依赖。

package.json内容：

{
  "name": "frontend",
  "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": {
    "axios": "^1.6.8",
    "jwt-decode": "^4.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.22.3",
    "react-scripts": "^3.0.1"
  },
  "devDependencies": {
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "vite": "^5.2.0"
  }
}

报错信息：

(env) PS C:\Users\Abdul\Documents\Personal Projects\API-test\Django&React FS\frontend> npm run dev

> frontend@0.0.0 dev
> vite

'React' is not recognized as an internal or external command,
operable program or batch file.
node:internal/modules/cjs/loader:1146
  throw err;
  ^

Error: Cannot find module 'C:\Users\Abdul\Documents\Personal Projects\API-test\vite\bin\vite.js'
    at Module._resolveFilename (node:internal/modules/cjs/loader:1143:15)
    at Module._load (node:internal/modules/cjs/loader:984:27)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12)
    at node:internal/main/run_main_module:28:49 {
  code: 'MODULE_NOT_FOUND',
  requireStack: []
}

Node.js v20.12.1
(env) PS C:\Users\Abdul\Documents\Personal Projects\API-test\Django&React FS\frontend>

解决方案

修复路径特殊字符：项目路径中的&符号会导致Windows命令行解析错误，将Django&React FS目录重命名为无特殊字符的名称（比如DjangoReactFS）。
重新安装依赖：路径修复后，删除node_modules和package-lock.json，重新执行安装：
```
# Windows环境
del /s /q node_modules && del package-lock.json
npm install
```
移除冲突依赖：react-scripts是Create React App的核心依赖，与Vite存在冲突，从package.json的dependencies中删除该条目，修改后重新执行npm install：
```
"dependencies": {
  "axios": "^1.6.8",
  "jwt-decode": "^4.0.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-router-dom": "^6.22.3"
}
```
强制调用本地Vite：若仍有问题，直接调用项目内的Vite命令：
```
npx vite
```
或修改dev脚本为：
```
"dev": "npx vite"
```

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