WebStorm 不自动运行 npm 脚本，必须手动创建运行配置：Command 填 run，Scripts 选 package.json 中定义的脚本名（如 dev），Package 指向项目根目录下的 package.json；依赖需在 Terminal 手动执行 npm install 或首次导入时勾选“Install dependencies”；启动端口为 http://localhost:5173，build 后须用 vite preview 预览 dist 目录。
WebStorm 本身不自动运行 npm 脚本，必须手动创建 npm 运行配置才能用绿色三角形启动 Vue 项目；直接双击 package.json 里的 dev 脚本或右键 “Run” 大概率失败。
npm 运行配置必须填对这三项
WebStorm 的 npm 配置不是“选个脚本就完事”，Command、Scripts、Package 三者错一个，就会报 Missing script: "dev" 或 Unknown script "vite"。
-
Command必须填run（不是vite，不是dev，也不是空） -
Scripts下拉框必须选中你package.json里定义的脚本名，比如dev、serve或start -
Package必须指向项目根目录下的package.json，不能是父目录或其他同名文件
依赖没装？别点右键 run install
刚 clone 下来的 Vue 项目，node_modules 是空的，IDE 不会主动帮你装依赖。常见错误是右键 package.json → Run ‘npm install’，结果报 command not found: vite —— 因为它可能用了错误的 Node.js 版本或工作目录。
- 真正生效的只有两种方式：
① 在 WebStorm 底部Terminal手动执行npm install（推荐，全程可见输出）
② 首次导入项目时，弹出Install dependencies提示框，勾选Run npm install并确认（仅此一次机会） - 如果已错过提示框，就别再依赖右键菜单，老老实实进 Terminal 装
启动后打不开页面？先看端口和输出日志
Vite 默认启在 http://localhost:5173/，不是旧版的 :8080。如果浏览器没弹出或显示连接被拒绝，问题往往不在 WebStorm 配置本身。
- 终端输出里必须出现
Local: http://localhost:5173/—— 如果没这行，说明服务根本没起来 - 检查 Settings > Tools > Web Browsers，确保首选浏览器已启用且路径正确
- 公司内网或防火墙可能拦截
5173端口；临时改端口可在vite.config.ts加：server: { port: 3000 }
build 后 dist/index.html 白屏？这不是 WebStorm 的锅
WebStorm 点 build 脚本只是调用 vite build，产物默认在 dist 目录。但直接双击打开 dist/index.html 必然白屏 —— 这是现代前端构建产物的限制，和 IDE 无关。
- 要预览 build 结果，必须起 HTTP 服务：在 npm 工具窗口里找
preview脚本并双击（它等价于vite preview） - 若没看到
preview，检查package.json是否有"preview": "vite preview"；没有就手动加 - 别把
dist目录设为Resources Root—— WebStorm 不需要干预这个目录的语义
最容易被忽略的是 Node.js 版本和项目要求是否一致：Vue3 + Vite 项目普遍要求 Node.js ≥ 18.0.0，而 WebStorm 可能还在用系统默认的老版本。在 Terminal 里跑 node -v && npm -v，结果必须和项目 .nvmrc 或 engines 字段对得上，否则后续所有 npm 操作都可能卡在 peer dep 报错或证书失效上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
