WebStorm配置前端项目环境变量方法-webstorm-PHP中文网

webstorm 的 environment variables 不自动继承 shell 变量，需手动配置或使用 envfile 插件加载 .env 文件；多环境推荐 envfile，兼容性方案为 npm script + dotenv；避免 cross-env 与 ide 配置混用；子进程需显式透传 env。

webstorm配置前端项目环境变量方法

Run Configuration 里 Environment variables 必须手动填

WebStorm 不会自动继承 shell 的 NODE_ENV、REACT_APP_API_URL 等变量，哪怕你在终端里 export NODE_ENV=development 后启动 WebStorm，调试时依然读不到。必须进 Run → Edit Configurations…，选中你的 NPM 或 Node.js 配置，在 Environment variables 栏里显式填写：

NODE_ENV=development;REACT_APP_ENV=local（Windows 用分号；macOS/Linux 用冒号）
键值对里等号两边不能有空格，否则变量名变成 "NODE_ENV " 这种带空格的非法名
如果用了 create-react-app，变量名必须以 REACT_APP_ 开头，否则 webpack 编译时直接过滤掉
Working directory 要设为项目根目录（含 package.json），否则 process.env 可能被后续模块覆盖

用 EnvFile 插件加载 .env 文件最省事

手动填变量易出错、难维护，尤其多环境（.env.development、.env.production）时。JetBrains 官方插件 EnvFile 可直接读取文件：

安装插件：Settings → Plugins → 搜索 EnvFile → Install → Restart IDE
在 Run Configuration 里勾选 Load environment variables from file
指定路径如 .env.local 或 ./.env.development（建议写相对路径，避免跨机器失效）
注意：EnvFile 只在 WebStorm 启动进程时注入变量，不影响你终端里运行的 npm run dev

npm script + dotenv 是兼容性最强的兜底方案

如果你不想装插件，或团队要求统一用脚本加载，就改 package.json：

面向设计的AXUI前端框架表单

面向设计的AXUI前端框架表单是一款包含表格、列表、弹窗等的AXUI前端框架表单下载。

下载

加一条 script："dev:env": "node -r dotenv/config ./src/index.js dotenv_config_path=.env.development"
WebStorm 的 NPM 配置里选这个 script，而不是直接跑 node ./src/index.js
确保入口文件顶部没重复调用 require('dotenv').config()，否则可能被覆盖或报错
TypeScript 项目需额外加 -r ts-node/register，否则 -r dotenv/config 会因无法解析 .ts 报错

别踩 cross-env 和 IDE 环境变量混用的坑

cross-env 和 WebStorm 的 Environment variables 字段功能重叠，混用会导致不可预测覆盖：

如果 npm script 里写了 "start": "cross-env NODE_ENV=production node server.js"，再在 WebStorm 里填 NODE_ENV=development，最终生效的是哪个取决于执行顺序，通常后者胜出但不保证
推荐二选一：本地开发全走 WebStorm 配置；CI/CD 或终端部署才用 cross-env
验证是否生效？在代码里加 console.log('ENV:', process.env.NODE_ENV)，别只信文档或注释

真正容易被忽略的是：WebStorm 的环境变量只作用于它启动的单个 Node 进程，子进程（比如 spawn 的 webpack、prisma）默认不继承，需要显式用 env: process.env 透传。