PhpStorm运行前端构建工具卡住_排查Webpack或Vite执行死锁【分析】

P粉328763957

P粉328763957

2026-07-23

390人浏览

原创

phpstorm运行webpack/vite卡在“starting...”主因是环境与配置未对齐:node解释器未绑定、node_modules未excluded、inotify句柄耗尽、运行配置误用javascript debug或node.js类型路径错误。

phpstorm运行前端构建工具卡住_排查webpack或vite执行死锁【分析】

PhpStorm 运行 Webpack 或 Vite 时卡在“Starting...”“Loading...”或终端无输出,基本不是构建工具本身挂了,而是 IDE 的运行配置和环境隔离没对齐——常见表现是进程启动后就静默、HMR 不触发、浏览器打不开,甚至 npm run dev 在终端里能跑,但在 PhpStorm 里点 ▶️ 就卡住不动。

Webpack 启动卡在 “Starting webpack-dev-server…”

这不是 webpack 没起来,是 PhpStorm 没真正把控制权交给它,或者 devServer 配置被 IDE 的代理逻辑劫持了。

  • devServer.hot 必须显式设为 true(Webpack 5+ 默认开启,但老项目常被关掉;光勾 IDE 的 “Use Hot Swap” 没用)
  • devServer.watchFiles 如果设置了,得覆盖你编辑的路径,比如 ['src/**/*', 'public/**/*'];漏掉任意一类,变更就不会触发重编译
  • 别用 “JavaScript file” 类型运行配置——它会直接执行 webpack.config.js,而不是启动 devServer。正确做法是:Run Configuration → Node.js 类型 → JavaScript filenode_modules/webpack-cli/bin/cli.jsApplication parameters--config webpack.config.js --mode development
  • 如果用了 pnpm,路径不是 node_modules/webpack-cli/bin/cli.js,而是类似 node_modules/.pnpm/webpack@5.92.1/node_modules/webpack-cli/bin/cli.js,必须手动补全,抄错版本号就卡住

Vite 启动卡在 “vite is starting…” 或终端空转

根本原因通常是 Node 环境没绑定、命令没找到,或 PhpStorm 内置服务和 Vite 开发服务器端口冲突。

PHP 8.5.5
PHP 8.5.5

PHP 8.5.5 是 PHP 8.5 分支的维护更新版本。该版本延续了“小步快跑”的迭代逻辑,通过深度错误修复、底层性能微调以及安全加固,旨在为开发者提供一个更健壮、更高效的运行环境。该版本严格遵守语义化版本规范,不包含破坏性变更。

下载
  • Command 'vite' not found 错误:不是没装 vite,而是 PhpStorm 没把 node_modules/.bin 加入 PATH。确认 Settings → Languages & Frameworks → Node.js and NPM → Node interpreter 指向项目实际用的 node(如 /usr/local/bin/node),再确保 node_modules/.bin/vite 存在
  • 浏览器打不开 http://localhost:5173/ 或热更新失效:删掉所有类型为 JavaScript Debug 的运行配置——它会强制启用 PhpStorm 内置静态服务(http://localhost:63342/),和 Vite 的 localhost:5173 冲突,互相劫持模块请求
  • 必须新建 npm 运行配置:Command 填 run,Scripts 选 dev(对应 package.json 里的 "dev": "vite"),并勾选 Run npm script in new terminal,避免复用终端导致环境变量污染
  • 启动后仍卡住?检查系统级 _JAVA_OPTIONS 是否被设置(常见于 /etc/profile~/.bashrc),它会导致 PhpStorm 渲染异常、参数冲突,启动日志会显示 Picked up _JAVA_OPTIONS

卡住时 CPU 低、磁盘静默,其实是索引死锁

表面看是构建命令卡住,实际是 PhpStorm 还在后台拼命索引 node_modulesvendor,导致资源耗尽、inotify 句柄占满,连文件变更都监听不到。

  • 打开 Help → Show Log in Explorer,搜 Indexing startedIndexing finished —— 如果后者迟迟不出现,说明索引根本没结束,构建进程被阻塞
  • 检查 File → Project Structure → Modules,确认 node_modulesvendordiststorage 全部标为 Excluded(图标为红色,灰色 = 仍监听)
  • Linux 下查 inotify 限制:cat /proc/sys/fs/inotify/max_user_watches,默认 8192 不够一个 node_modules;永久改:写入 /etc/sysctl.d/60-jetbrains.conf,内容为 fs.inotify.max_user_watches=524288,再执行 sudo sysctl -p --system
  • 标记 Excluded 后必须重启 PhpStorm,仅重载项目无效;改完 phpstorm64.vmoptions 也一样,热重载不生效

最常被忽略的是:卡住往往不是单一问题,而是 Node 环境 + 目录排除 + inotify 限制 + 运行配置四者同时出错。先查日志确认是构建卡还是索引卡,再逐层排除——别一上来就调 JVM 内存,那只是掩盖症状。

php免费学习视频:立即使用
踏上前端学习之旅,开启通往精通之路!从前端基础到项目实战,循序渐进,一步一个脚印,迈向巅峰!

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

php 前端 vite phpstorm

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

1084

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

2189

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

2082

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

2252

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

333

5

phpstorm怎么导出项目
phpstorm怎么导出项目

phpstorm提供导出项目功能,步骤如下:打开phpstorm项目转到“项目”菜单选择“导出项目”选择导出格式指定导出位置选择导出范围勾选“包括依赖项”框(可选)单击“导出”完成导出。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.04.08

758

7

phpStorm怎么运行
phpStorm怎么运行

本专题整合了phpstorm运行教程,阅读专题下面的文章了解更多相关内容。

2025.09.18

1866

13

phpstorm开发环境搭建教程
phpstorm开发环境搭建教程

本专题整合了phpstorm开发环境搭建和运行项目教程,阅读专题下面的文章了解更多详细教程。

2025.09.18

1649

18

phpstorm怎样运行php
phpstorm怎样运行php

本专题整合了phpstorm运行php相关教程,阅读专题下面的文章了解更多详细内容。

2025.09.18

439

11

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
安装 Xdebug 并配置 phpstorm
安装 Xdebug 并配置 phpstorm

共1课时 | 125人学习

3分钟内将Xdebug安装到PHP
3分钟内将Xdebug安装到PHP

共1课时 | 100人学习