PhpStorm内置终端运行npm run dev必定卡在“Compiling…”是因为其终端模拟层截断TTY信号，导致HMR失效、服务假启动、端口占用且无输出；正确做法是改用系统终端执行，PhpStorm仅用于编辑与调试。
别用 PhpStorm 内置终端执行 npm run dev —— 它会卡在 “Compiling…” 不动，不是编译慢，是 TTY 信号被截断导致服务假启动，端口占着、控制台没输出、HMR 彻底失效。
为什么 PhpStorm 内置终端运行 npm run dev 必定卡住
Vue CLI 和 Vite 都依赖完整 TTY 环境处理热更新信号（比如 SIGUSR2）、实时日志流和进程生命周期管理。PhpStorm 的终端模拟层不转发这些底层信号，只捕获 stdout/stderr 的静态片段，结果就是：进程看似在跑，实则挂起，浏览器白屏，改代码没反应。
这不是配置问题，是架构限制 —— PhpStorm 的终端定位是轻量命令执行，不是前端开发服务器托管环境。
- 现象：终端输出停在
Compiling...，无Compiled successfully或HMR enabled - 连带后果：端口（如 3000/5173）被僵尸进程占用，
lsof -i :3000能查到但 kill 不掉 - 错误本质：不是“没配好”，是“不该这么用”
正确启动方式：绕过 PhpStorm 终端，用系统终端 + IDE 只做编辑
让 PhpStorm 回归它最擅长的事：语法高亮、跳转、调试、重构。开发服务器交给系统终端管。
立即学习“PHP免费学习笔记（深入）”；
- 先关闭 PhpStorm 所有运行中的 npm 配置：
Run → Stop（顶部菜单，或快捷键Ctrl+F2/Cmd+F2） - 打开系统终端：
macOS/Linux用 Terminal，Windows用 PowerShell（不是 CMD，PowerShell 对 Node.js 兼容更稳） -
cd到项目根目录（确保有package.json），执行npm run dev或npm run serve（看脚手架约定） - 此时浏览器访问
http://localhost:xxx正常加载，修改文件自动刷新
注意：npm 命令必须在系统终端里首次启动；后续 PhpStorm 中的 “Run Configuration” 即使删光，也不影响已运行的服务。
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
npm 脚本在 PhpStorm 侧边栏显示不出来？检查两个地方
想点一下就执行 npm run build 这类脚本，得让 PhpStorm 识别 package.json 并挂载 npm 工具窗口。
- 右键点击项目根目录下的
package.json文件 → 选Show npm Scripts - 若仍不出现 npm 侧边栏，去
View → Tool Windows → npm手动唤出（首次可能灰显，点一下就激活） - 确认
Settings → Languages & Frameworks → Node.js and NPM中 Node.js 解释器路径已正确指向本地安装（如/usr/local/bin/node或C:\Program Files\nodejs\node.exe）
如果 npm 窗口空着不列脚本，大概率是 package.json 没被识别为项目根——检查是否误开了子目录，或项目结构里有多个 package.json 导致歧义。
想调试 Vue 组件？别依赖 “Run” 按钮，用 Chrome DevTools + PhpStorm 断点联动
PhpStorm 无法直接 attach 到 npm run dev 启动的 Vite/Vue CLI 进程做断点调试（缺少 debugger 协议桥接）。真要调试，走标准前端路径：
- 确保启动时加了
--host（Vite）或--open（Vue CLI），让 DevTools 能连上 - 在 PhpStorm 中对
.vue文件的<script></script>区域打普通断点（不是“Run Configuration”里的断点） - 用 Chrome 访问
http://localhost:xxx，打开 DevTools →Sources标签页 → 找到对应.vue文件，点行号设断点 - 两者断点会同步：Chrome 停住时，PhpStorm 自动高亮对应行；PhpStorm 中按
F8步进，Chrome 也同步执行
这个联动靠的是 sourcemap 和浏览器调试协议，跟 PhpStorm 是否“托管”服务无关 —— 所以只要服务是系统终端启动的、sourcemap 开启（默认开启），就能用。
最容易被忽略的一点：即使你把所有插件都装齐、语言注入全配好，只要还在 PhpStorm 内置终端里敲 npm run dev，前面所有配置都白搭。它不是“少配一步”，是根本不在同一执行平面。
