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 中的脚本，必须显式创建运行配置：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

立即学习“前端免费学习笔记（深入）”；

• 点击右上角 “Add Configuration” → “+” → 选择 npm
• Name 填 dev（与 package.json 中脚本名一致）
• Package：自动指向项目根目录下的 package.json，别选错路径
• Command：固定填 run（不是 dev，也不是 vite）
• Scripts：下拉选中你定义的脚本名（如 dev）
• 勾选 Run npm install（首次运行时自动装依赖，避免 command not found: vite）

启动后打不开页面？检查三件事

终端输出里是否显示 Local: http://localhost:5173/ —— 如果是，就别输 :8080：

• 确认 WebStorm 设置中浏览器已启用：Settings > Tools > Web Browsers，首选浏览器路径正确
• 公司代理或防火墙可能拦截 5173 端口；可在 vite.config.ts 临时改端口：server: { port: 3000 }
• 若页面空白或跳转到 about:blank，检查浏览器启动参数是否含 --remote-allow-origins=* 和 --remote-debugging-port

调试断点不生效？source map 必须双开

.vue 文件中的 <script setup> 在 WebStorm 里调试，依赖 source map 映射回原始 TS 代码：

• 确保 vite.config.ts 中没有 build.sourcemap = false（开发模式下默认开启）
• Settings > Languages & Frameworks > JavaScript > Debugging，必须勾选 Enable JavaScript source maps
• Node.js 运行时需在 Settings > Languages & Frameworks > JavaScript > Node.js 中正确指定，不能是空或系统默认错误路径

最容易被忽略的是：WebStorm 的内置服务器端口（默认 63342）和 Vite 的服务端口（如 5173）是两套独立机制，调试时只走后者，前者仅用于静态资源预览——混淆这两者会导致反复检查“为什么断点没进”。