新建项目必须选vite模板并配置npm运行配置，否则启动失败；需确认vite.config.ts和"dev":"vite"存在，run configuration中command填run、scripts选dev，并勾选自动安装依赖。
新建项目时选错模板会导致后续启动失败
WebStorm 2024.2+ 内置 Vite 支持，但必须在 File → New → Project 里左侧选 Vite，右侧 Template 下拉选 vue 或 vue-ts。选 Vue CLI、Webpack 或空的 JavaScript 模板，生成的项目结构不含 vite.config.ts，也没有 "dev": "vite" 脚本，后续点绿色按钮必然报 Specify a valid package manager。
- 确认生成后根目录存在
vite.config.ts（或vite.config.js）和src/App.vue - 检查
package.json中是否有"dev": "vite"—— Vite 5.x 默认就是这个，不是vite dev或npm run serve - 避免手动执行
vue create或npm init @vitejs/app后再导入项目，这种“先建后导”方式容易漏掉 WebStorm 对 Vite 的自动识别逻辑
Run Configuration 配不对我点绿色按钮就白忙活
右上角绿色 ▶ 按钮默认是哑的，必须手动配一个 npm 类型运行配置，否则点击没反应或直接报错。
- 路径：
Run → Edit Configurations → + → npm -
Package.json：指向项目根目录下的package.json -
Command：填run（不是dev，也不是留空） -
Scripts：下拉选dev（对应package.json里的"dev": "vite"） - 勾选
Run npm install automatically before running this script，防依赖漏装 - 保存后，右上角下拉菜单选中该配置，再点 ▶ 才真正等效于终端执行
npm run dev
启动后打不开页面？别乱杀进程，先看控制台第一行
Vite 启动成功后，控制台第一行会输出类似 ✓ Local: http://localhost:5173/。WebStorm 不会自动唤起浏览器，也不会复用你平时用的 Chrome/Firefox 标签页。
- 复制该链接，手动粘贴到浏览器地址栏访问 —— 这是最稳的方式
- 想点击就打开：在刚才的 Run Configuration 里，勾选
Before launch → Open in browser，并填入http://localhost:5173 - 如果提示端口被占，不要硬杀
node.exe或lsof -i :5173，直接改vite.config.ts的server.port，比如设为3000 - 千万别点 WebStorm 右上角自带的
Open in Browser按钮，它调用的是内置代理服务http://localhost:63342/，和 Vite 冲突，必报Failed to fetch
终端里输 vite 报 command not found？PATH 没注入
现象是 WebStorm 内置终端输入 vite 提示找不到命令，但在系统终端（PowerShell、bash）里能正常运行。根本原因是 WebStorm 默认没把 node_modules/.bin 加进 PATH。
- 方案一：打开
Settings > Tools > Terminal，把Shell path改成你日常用的 shell，比如pwsh.exe（Windows）或/bin/bash（macOS/Linux） - 方案二（更稳）：在
Run > Edit Configurations > Templates > npm中新建模板，Working directory设为项目根目录，Command填npx vite—— 绕过 PATH 依赖 - 确认
node_modules/.bin/vite文件真实存在，且已执行过npm install
localhost:63342 的依赖都要切断。这点容易被忽略，但一旦混用，ref 就飘红、断点就灰色、HMR 就静音。
