webstorm 本身不打包 vue 项目，仅调用 package.json 中定义的 build 脚本（如 "build": "vite build"），需确保脚本存在、工具链已安装，并通过 npm 工具窗口双击运行；产物默认在 dist 目录，须用 vite preview 启动 http 服务预览，不可直接双击 index.html。
WebStorm 本身不打包 Vue 项目，它只是调用 vite build（或 vue-cli-service build）这类命令 —— 关键在 package.json 里有没有定义好 build 脚本，以及本地是否装了对应工具链。
确认 package.json 里有可用的 build 脚本
Vue 项目打包行为完全由 package.json 的 scripts 字段决定。WebStorm 只是“点一下就执行”，不会自己生成逻辑。
- 打开
package.json，检查是否存在类似"build": "vite build"或"build": "vue-cli-service build"的条目 - 如果没有，手动添加（注意逗号分隔和引号闭合），保存后 WebStorm 的 npm 工具窗口会自动刷新脚本列表
- 如果项目用的是 Vite，但脚本写成
"build": "npm run build:prod"，那 WebStorm 点build就会报错：找不到对应命令 —— 它只认顶层脚本名，不递归解析
通过 WebStorm 的 npm 工具窗口运行 build
这是最稳、最符合工程习惯的方式，比直接开终端手敲更可控，也方便复用环境变量。
- 菜单栏 → 视图 → 工具窗口 → npm，或按
Alt+8（Windows/Linux）/Cmd+8（macOS）唤出 - 展开你的项目 → 展开
Scripts→ 找到build，双击即可运行 - 如果没看到
build，右键package.json→ “Show npm Scripts”，确保没被误关 - 首次运行时，WebStorm 会创建一个临时运行配置；如需固定参数（比如加
--mode staging），右上角下拉 → Edit Configurations… → 在Scripts栏填build --mode staging，别写成npm run build --mode staging
build 后产物在哪？为什么浏览器打不开 dist/index.html？
执行成功后，默认输出目录是 dist，但直接双击 dist/index.html 会白屏或报错 —— 这不是 WebStorm 的问题，而是现代前端构建产物必须走 HTTP 服务才能正确加载资源（路径、CORS、ESM 模块等）。
-
vite build产出的是静态文件，不是可直接双击运行的 HTML - 想本地预览，运行
vite preview（同样在 npm 工具窗口里找这个脚本），它会起一个轻量 HTTP 服务，默认地址http://localhost:4173 - 如果要用其他端口，编辑运行配置 →
Scripts栏改为preview --port 8080 - 别把
dist目录标记为 “Resources Root” 或 “Sources Root” —— WebStorm 不需要、也不该干预这个目录的语义，它只是输出目标
常见失败原因和绕过陷阱
报错往往不是 WebStorm 导致的，而是底层 Node.js 或构建工具链的问题，WebStorm 只是暴露了它们。
-
command not found: vite→ 项目没装vite，或装在全局但 WebStorm 没读到 PATH；优先执行npm install或pnpm install，再重试 - 点
build没反应 → 检查右下角状态栏是否显示 “Node.js is not configured”；去 Settings → Languages & Frameworks → Node.js and NPM，指定正确的 Node 解释器路径（通常选系统已安装的那个） - 使用 pnpm/yarn 却看不到脚本 → npm 工具窗口右上角 ⚙️ → Change package manager，选对包管理器，否则它默认只扫
node_modules/.bin下的 npm 相关 bin - build 成功但页面空白 → 打开浏览器开发者工具，看 Console 或 Network 是否报 404（比如
/assets/index.xxxx.js找不到），大概率是vite.config.js里base配置和实际部署路径不匹配
真正容易被忽略的点是：WebStorm 的运行配置不会自动继承你在终端里设的环境变量（比如 VUE_APP_ENV=staging），如果构建逻辑依赖这些变量，必须显式写进运行配置的 Environment variables 栏里，而不是指望它“自动同步”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
