详细介绍WebStorm之Vue项目快速启动面板配置-webstorm-PHP中文网

webstorm 启动 vue 项目失败主因是 npm 运行配置未正确设置：command 必须填 run，scripts 下拉框选 package.json 中定义的脚本名（如 dev 或 serve），package 指向根目录 package.json，首次运行应勾选 run npm install。

详细介绍webstorm之vue项目快速启动面板配置

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 的跳转识别很稳。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

检查 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。很多问题其实只是输错了地址，或浏览器根本没弹出来。

先看终端输出有没有 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 —— 有时改完配置不重启，调试器仍用旧缓存