WebStorm 启动 Vue 项目失败主因是 npm 运行配置未正确设置：Command 必须填 run，Scripts 下拉框选 package.json 中定义的脚本名（如 dev 或 serve），Package 指向根目录 package.json，首次运行应勾选 Run npm install。
WebStorm 启动 Vue 项目失败，90% 是因为没配对 npm 运行配置——不是脚本写错，也不是没装依赖，而是 WebStorm 根本没被告诉“该跑哪条命令”。
为什么点绿色三角形没反应？
WebStorm 不会自动读取 package.json 里的 "scripts"，哪怕你写了 "dev": "vite"，它也当看不见。必须手动创建一个 npm 运行配置，明确指定脚本名、命令和上下文。
-
Command字段必须填run（不是vite，也不是dev） -
Scripts下拉框里选的才是你实际要执行的脚本名，比如dev或serve -
Package必须指向项目根目录下的package.json，手误选成子目录的package.json就会报command not found: vite - 首次运行建议勾选
Run npm install，否则依赖缺失时控制台只报错不提示装包
Vue3 + Vite 项目该配哪个脚本？
Vite 已是 Vue 官方推荐构建工具，vue create 生成的 Webpack 项目在 WebStorm 里类型推导弱、热更新卡顿，而 Vite 模板默认开 source map、支持 <script setup></script> 断点调试，且 WebStorm 2024.2+ 对 vite.config.ts 和 main.ts 的跳转识别很稳。
- 检查
package.json中是否含"dev": "vite"或"serve": "vite"—— 配置时就选这个字段名 - 别沿用旧习惯填
npm run serve：WebStorm 的npm配置本质是调npm run [script]，所以Command填run，Scripts填serve即可 - 如果项目用的是 Vue2 + Vue CLI，脚本名通常是
serve，但强烈建议迁移到 Vite；CLI 的vue.config.js在 WebStorm 中常丢失类型，devServer配置也不如 Vite 的server.port直观
启动后打不开 http://localhost:5173？
Vite 默认端口是 5173，不是 Vue CLI 的 8080。很多问题其实只是输错了地址，或浏览器根本没弹出来。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
- 先看终端输出有没有
Local: http://localhost:5173/—— 有就别试8080 - WebStorm 设置里：
Settings > Tools > Web Browsers，确认首选浏览器已启用，路径没被杀毒软件重置 - 公司网络若走代理或启防火墙，
5173可能被拦截；临时改端口只需在vite.config.ts加一行：server: { port: 3000 } - 如果页面空白但控制台无报错，检查
main.ts是否正确挂载到#app，Vite 默认 HTML 里有个<div id="app"></div>，删了就白屏
断点进了 .vue 文件却停不住？
WebStorm 调试 <script setup></script> 组件，靠的是 source map 把编译后的 JS 映射回原始 TS/JS。映射链一断，断点就失效。
- 确认
vite.config.ts里没写build.sourcemap = false（开发模式下默认为true） - WebStorm 设置中：
Settings > Languages & Frameworks > JavaScript > Debugging，必须勾选Enable JavaScript source maps - 如果用了
defineProps或defineEmits，确保 WebStorm 版本 ≥ 2024.2，旧版对组合式 API 的类型推导支持不全 - 重启 WebStorm —— 有时改完配置不重启，调试器仍用旧缓存
最常被忽略的其实是 Command 和 Scripts 的分工：前者固定填 run，后者才对应 package.json 里的键名。配错一个字，绿色按钮就只是个装饰品。
