webstorm 运行 vite 失败主因是 path 未包含 node_modules/.bin 且端口冲突；应改终端 shell 或用 npx vite 启动，禁用 javascript debug 配置，统一 typescript 版本，启用 vue 支持并配置 sourcemap。
WebStorm 里直接点绿色三角运行 Vite 项目失败，根本不是插件没装或命令写错，而是它默认没把 node_modules/.bin 加进 PATH，且内置终端和 Vite 开发服务器端口冲突——两个服务抢 localhost，热更新、断点、类型推导全崩。
WebStorm 终端找不到 vite 命令
现象是终端里输入 vite 报 command not found，但 shell（如 pwsh.exe 或 bash）里能正常运行。这是因为 WebStorm 内置终端默认用 cmd.exe（Windows）或系统级 shell 配置，跳过了项目级 node_modules/.bin 的自动 PATH 注入。
- 打开
Settings > Tools > Terminal，把Shell path改成你日常用的 shell，比如pwsh.exe（PowerShell）或/bin/bash - 更稳方案：不用改终端，直接在
Run > Edit Configurations > Templates > npm中新建配置：Working directory设为项目根目录，Command填npx vite（绕过 PATH 依赖） - 确认已执行过
npm install或yarn install，且node_modules/.bin/vite文件真实存在
点绿色三角启动后热更新失效或报 Failed to fetch
这是 WebStorm 自带的 JavaScript Debug 配置在作祟。它会起一个 http://localhost:63342/ 的代理服务，而 Vite 默认跑在 http://localhost:5173/，两者混在一起导致跨域、模块加载路径错乱、HMR 完全不触发。
- 删掉所有
JavaScript Debug类型的运行配置，一个不留 - 新建
npm类型配置：Command填run，Scripts选dev（对应package.json里的"dev": "vite"） - 勾选
Run npm script in new terminal，避免和内置服务抢端口 - 浏览器务必访问 Vite 输出的真实地址（如
http://localhost:5173/），别点 WebStorm 右上角的Open in Browser按钮
Vue/React 文件里 ref、useState 提示缺失或断点灰色
Vite 不做类型检查，靠的是 TypeScript 和 IDE 协同。WebStorm 默认用内置 TS 语言服务，但它和你项目里 node_modules/typescript 的版本不一致时，ref、defineComponent 就会飘红或断点无效。
- 进
Settings > Languages & Frameworks > TypeScript，把Version改成Project default (node_modules/typescript) - 确保项目根目录有
tsconfig.json，且含"include": ["src/**/*"]和"compilerOptions": { "jsx": "preserve" }（Vue 用automatic） - 如果用了
vite.config.ts，记得装@types/node：npm install -D @types/node，否则path.resolve会标红，整个配置解析失败 - 改完
tsconfig.json后，手动触发重载：右键项目根目录 →Reload project，或菜单栏File > Reload project
断点打在 .vue 文件的 <script setup> 里不生效</script>
WebStorm 默认把 .vue 当纯 HTML 处理，不主动解析 <script setup></script> 里的逻辑，断点位置映射出错。哪怕 Vite 本身 HMR 正常，IDE 也“看不见”代码。
- 进
Settings > Languages & Frameworks > JavaScript > Libraries，确认已启用 Vue.js 支持（图标是 Vue Logo） - 右键
src目录 →Mark Directory as > Resources Root，避免被当成静态资源 - 在
vite.config.ts中显式关闭 esbuild 的 inline sourcemap：build: { sourcemap: true }（不要写'inline'），改完必须完全重启 Vite（Ctrl+C再npm run dev） - 确认
Settings > Languages & Frameworks > JavaScript > Debugging中勾选了Enable JavaScript source maps
最易忽略的一点：所有配置生效的前提是 Vite 进程本身真在跑 HMR。打开浏览器 Console，搜 [vite] hot updated:——没这个日志，说明问题不在 WebStorm，而在 Vite 启动方式或配置层；有这个日志却 IDE 不响应，才该回头查 sourcemap 或 TypeScript 版本对齐。
