webstorm必须手动配置npm运行配置才能运行vue项目，因其不会自动识别package.json中的scripts脚本；需通过add configuration→npm创建配置，command填run、scripts选dev、勾选run npm install，否则点击绿色三角形无反应。
WebStorm 里点一下绿色三角形就能跑 Vue 项目，不是靠“自动识别”，而是必须手动配 npm 运行配置；不配，点啥都没反应。
为什么 npm 配置是必选项，而不是可选
WebStorm 不会扫描 package.json 里的 "scripts" 并自动生成运行项。哪怕你项目里明明写了 "dev": "vite"，WebStorm 也当没看见——除非你主动告诉它：“我要用这个脚本”。这和 VS Code 的自动脚本发现机制完全不同。
常见错误现象：
- 点了右上角绿色三角形，控制台空空如也，没任何输出
- 终端报错
command not found: vite（其实是没走 npm run，直接调了 vite 命令） - 配置完却启动的是 Node.js 模式，而不是 npm 模式，结果找不到入口文件
正确做法：
- 点击右上角 “Add Configuration” → “+” → 选择
npm（不是Node.js） -
Name填dev或你喜欢的名字（比如Vite Dev） -
Package必须指向项目根目录下的package.json（WebStorm 通常能自动识别，但别手误选成子目录的） -
Command固定填run（不是dev，也不是vite） -
Scripts下拉菜单里选中你package.json中定义的脚本名，比如dev、serve或start - 勾选
Run npm install（首次运行时自动装依赖，避免因缺vite报错）
端口打不开？先看 WebStorm 控制台输出的 Local 地址
Vite 默认启动在 http://localhost:5173/，Vue CLI 才是 :8080。很多人输错端口，本质是因为没看控制台第一行输出。
检查三件事：
- 终端输出里是否明确出现
Local: http://localhost:5173/—— 如果是，就别试8080 - WebStorm 设置里
Settings > Tools > Web Browsers是否启用了你常用的浏览器（比如 Chrome），路径是否有效 - 公司网络或杀毒软件可能拦截
5173端口；临时改端口可在vite.config.ts中加：server: { port: 3000 }
调试 <script setup></script> 断点不生效，90% 是 source map 没开
WebStorm 调试 Vue SFC 文件（尤其是 .vue 里的 <script setup></script>）依赖 source map 映射到原始 TS/JS。Vite 默认开启，但容易被覆盖或忽略。
必须确认两处：
-
vite.config.ts中没有写build.sourcemap = false（开发模式下不用管build，但有人复制配置会误带进来） - WebStorm 设置中
Settings > Languages & Frameworks > JavaScript > Debugging已勾选Enable JavaScript source maps
如果仍断点失效，重启 WebStorm 再试一次——它有时不会热更新 sourcemap 配置状态。
最常被跳过的一步：每次换新项目，都得重新配一次 npm 运行配置；WebStorm 不跨项目复用，也没“模板”功能。别指望导入项目就自动能点绿三角——那只是个按钮，背后没配置，它就是块灰色塑料。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
