webstorm 需手动配置 npm 运行脚本才能启动 vue 项目;vite 是 vue3 默认工具,端口为5173,需在 ide 中创建 npm 配置(name: dev, command: run, script: dev),并启用 source map 调试。

WebStorm 本身不自动运行 Vue 项目,必须手动配置 npm 运行脚本,否则点击绿色三角形毫无反应。
确认项目用的是 Vite 还是 Vue CLI
Vue 官方已将 vite 设为 Vue3 默认构建工具;vue-cli-service 是 Webpack 封装,启动慢、热更新卡顿、TS 类型推导弱。打开 package.json 查看 scripts 字段:
- 如果含
"dev": "vite"或"serve": "vite"→ 用 Vite 流程 - 如果含
"serve": "vue-cli-service serve"→ 用 Vue CLI 流程(不推荐新项目)
Vite 项目默认端口是 http://localhost:5173,不是旧版的 :8080;CLI 项目才是 :8080。
手动添加 npm 运行配置(关键一步)
WebStorm 不会自动识别 package.json 中的脚本,必须显式创建运行配置:

