WebStorm本身不参与多环境逻辑，只执行npm run调用的脚本；多环境打包是否生效取决于package.json中scripts写法、.env文件是否存在及构建工具（Vite或Vue CLI）能否正确读取--mode参数。
WebStorm 本身不参与多环境逻辑，只执行 npm run 调用的脚本 —— 多环境打包是否生效，完全取决于 package.json 里 scripts 的写法、.env 文件是否存在、以及构建工具（Vite 或 Vue CLI）能否正确读取 --mode 参数。
确认构建工具类型再配环境变量
Vue 项目现在分两大流派：Vite 和 Vue CLI（vue-cli-service），它们读取环境的方式不同，不能混用配置。
- Vite 默认只识别
.env、.env.development、.env.production这三类文件，且必须放在项目根目录；--mode参数会自动匹配对应文件名后缀（比如--mode staging就读.env.staging） - Vue CLI 支持
.env.[mode]，但要求文件名严格匹配--mode值，且需在vue.config.js中显式导出process.env变量才能在代码里用process.env.VUE_APP_XXX - 如果你用的是 Vite，却在
package.json里写"build:staging": "vue-cli-service build --mode staging"，那 WebStorm 点了也白点 —— 命令根本不存在
在 WebStorm 里正确运行带 mode 的打包命令
别在终端手敲 npm run build:staging，直接用 WebStorm 的 npm 工具窗口更稳，还能复用 Node 环境和代理设置。
- 按
Alt+8（Windows/Linux）或Cmd+8（macOS）打开npm工具窗口 - 展开项目 →
Scripts→ 找到你定义的脚本（如build:staging），双击运行 - 如果想临时加参数（比如指定输出目录），右上角下拉 →
Edit Configurations…→ 在Scripts栏填build:staging --outDir dist-staging，注意不要写成npm run build:staging --outDir... - 首次运行后，WebStorm 会缓存这个配置；下次想切环境，只需改
Scripts栏里的命令名即可，不用重配
常见失败现象和对应检查点
打包完发现 API 地址还是开发环境的，或者控制台报 Cannot read property 'VUE_APP_API' of undefined，大概率是以下某个环节断了。
立即学习“前端免费学习笔记（深入）”；
-
.env.staging文件没放在项目根目录，而是丢进了src或config里 —— Vite 和 Vue CLI 都只认根目录下的.env*文件 - 变量名没加
VUE_APP_前缀（Vue CLI）或没以VITE_开头（Vite）—— Vue CLI 下只有VUE_APP_开头的变量才会被注入，Vite 下必须是VITE_开头才进import.meta.env - 脚本里写了
"build:staging": "vite build --mode staging"，但项目实际用的是 Vue CLI —— 检查node_modules里有没有vite，有没有vue-cli-service，以实际安装为准 - WebStorm 的 Node interpreter 配置错了，指向了一个没装
vite或vue-cli-service的 Node 版本 —— 菜单栏 →File → Settings → Languages & Frameworks → Node.js and NPM里核对路径
为什么本地预览 dist 目录总是白屏
这不是环境配置问题，而是所有现代前端打包产物的共性限制：资源路径、ESM 加载、CORS 等机制都依赖 HTTP 协议。直接双击 dist/index.html 会触发 file:// 协议，必然失败。
- 必须用
vite preview（Vite）或http-server（Vue CLI）起一个本地服务 - WebStorm 里同样在 npm 工具窗口找
preview脚本双击即可，默认端口4173；想换端口，编辑运行配置，在Scripts栏改成preview --port 8080 - 别试图把
dist目录设为Resources Root—— WebStorm 对它没意义，反而可能干扰其他插件判断
真正容易被忽略的是环境变量名的前缀规则和构建工具的实际类型 —— 很多人照着教程改了 .env.staging，却忘了自己项目用的是 Vite，结果变量名还写着 VUE_APP_API，自然读不到。
