webstorm不识别vite命令的根本原因是未将node_modules/.bin加入path，且javascript debug配置会启动冲突的63342端口服务；应改用npm类型配置运行dev脚本、指定shell路径或npx vite、禁用javascript debug并访问localhost:5173。
WebStorm 本身不运行 Vite，它只调用 vite 命令 —— 关键在于命令能否被正确解析、环境是否就位、调试链路是否完整。
为什么在 WebStorm 终端里能 vite，但点运行按钮却报“command not found”
根本不是插件没开或 Node 没装，而是 WebStorm 内置终端默认没把项目级 node_modules/.bin 加进 PATH。Shell 启动时自动加载的路径，WebStorm 不继承。
- 打开
Settings > Tools > Terminal，把Shell path改成你日常用的 shell（如pwsh.exe、zsh或bash），别用cmd.exe - 更稳妥的做法：改用
npx vite—— 在Run > Edit Configurations > Templates > npm中，把Command设为npx，Scripts设为dev，Working directory设为项目根目录 - 确认
node_modules/.bin/vite确实存在（执行过npm install或pnpm install）
点绿色三角启动后页面白屏 / 断点灰色 / import 报错
这是误用了 JavaScript Debug 类型配置导致的典型症状：它会起 http://localhost:63342/ 代理服务，和 Vite 默认的 http://localhost:5173/ 冲突，模块路径、CORS、ESM 加载全崩。
- 删掉所有
JavaScript Debug类型的运行配置 - 新建一个
npm类型配置：Package.json script选dev（对应"dev": "vite"），勾选Run npm script in new terminal - 浏览器必须访问
http://localhost:5173/（Vite 输出的真实地址），不要点 WebStorm 右上角 “Open in Browser” - 断点打在
.vue的<script setup></script>里无效？右键src目录 →Mark Directory as > Resources Root，并确认已启用 Vue.js 支持（设置里有 Vue 图标）
调试时断点不命中，控制台没输出，debugger 也不停
Vite 开发服务器依赖 VITE_* 环境变量和插件链（比如 @vitejs/plugin-vue），Node.js 类型配置会绕过这些，直接跑二进制，等于“裸奔”。
- 务必使用
npm类型配置启动调试，而不是Node.js类型 - 检查
vite.config.ts中build.sourcemap设为true（不是'inline'），否则 WebStorm 映射不准 - 进
Settings > Languages & Frameworks > JavaScript > Debugging，确保勾选了Enable JavaScript source maps - 临时验证：在
<script setup></script>里写一行debugger，用浏览器 DevTools 打开http://localhost:5173/看是否能停 —— 如果浏览器能停，说明是 WebStorm 映射问题；如果连浏览器都不停，就是 vite 配置或插件缺失
最常被忽略的一点：所有调试行为都依赖 Vite 开发服务器真实运行，file:// 协议打开 index.html 或双击 dist 文件，永远无法触发模块加载和 sourcemap 解析。
