WebStorm 运行 Vue 项目推荐用 Vite 而非 Vue CLI，因 Vite 启动更快、热更新更流畅、TS 支持更好；需手动配置 npm 运行脚本，确保 source map 开启并正确挂载应用。
WebStorm 运行 Vue 项目不需要 Vue CLI，推荐直接用 Vite 启动，尤其对 Vue3 + TS 项目更轻、更快、更少兼容问题。
为什么不用 vue create 而用 vite？
Vue 官方已将 Vite 设为 Vue3 的默认构建工具，vue-cli-service 本质是 Webpack 封装，启动慢、热更新卡顿、TS 类型提示不如 Vite 原生支持。WebStorm 2024.2+ 对 Vite 的识别和调试支持已很成熟。
-
vue create生成的项目默认用 Webpack，vite用原生 ES 模块，冷启动快 3–5 倍 - Vite 的
main.ts和vite.config.ts在 WebStorm 中能正确跳转、推导类型，vue.config.js则常出现类型丢失 - 如果项目里有
eslint或prettier，Vite 模板默认已配好插件集成，CLI 模板需手动加eslint-webpack-plugin
在 WebStorm 中配置 npm 启动项（关键一步）
WebStorm 不会自动识别 package.json 里的 dev 或 build 脚本，必须手动创建运行配置，否则点绿色三角形没反应。
- 点击右上角“Add Configuration” → “+” → 选择
npm -
Name填dev（或serve，保持和package.json中"scripts": { "dev": "vite" }一致） -
Package：自动指向项目根目录下的package.json，别手误选错 -
Command：填run（不是dev，也不是vite） -
Scripts：下拉选中dev（即你package.json里定义的脚本名） - 勾选
Run npm install（首次运行时自动装依赖，避免报command not found: vite）
启动后打不开页面？检查端口和浏览器设置
WebStorm 默认启动 http://localhost:5173（Vite），不是旧版的 :8080。如果浏览器没自动弹出，或显示连接被拒绝，先确认三件事：
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
立即学习“前端免费学习笔记（深入）”；
- 终端输出里是否出现
Local: http://localhost:5173/—— 如果是5173，就别输8080 - 检查 WebStorm 是否绑定了正确的浏览器：进入
Settings > Tools > Web Browsers，确保首选浏览器已启用且路径正确 - 如果用公司代理或防火墙严格，可能拦截了
5173端口；可在vite.config.ts中临时改端口：server: { port: 3000 }
调试 Vue 组件时断点不生效？必须开 source map
Vue SFC（.vue 文件）的 <script setup> 语法在 WebStorm 里调试，依赖 source map 映射到原始 TS 代码。默认 Vite 是开启的，但容易被忽略的是：
- 确保
vite.config.ts中没有写build.sourcemap = false - 在 WebStorm 中，打开
Settings > Languages & Frameworks > JavaScript > Debugging，确认Enable JavaScript source maps已勾选 - 断点要打在
<script setup>内部，而不是编译后的__default__函数里 —— WebStorm 会自动映射，但首次调试前建议清一次浏览器缓存
最常被忽略的一点：Vite 项目里 main.ts 的入口代码必须用 createApp 显式挂载，不能只写 new Vue(...)，否则 WebStorm 的 Vue 插件无法识别组件上下文，断点和 props 提示全失效。
