WebStorm需手动启用EnvFile插件并满足根目录、文件名、格式等条件才能加载.env变量；多环境文件需配置Files to load；HTTP Client须声明环境块；调试需手动将变量注入运行配置。
WebStorm 默认不自动加载 .env 文件里的变量，必须手动启用插件并确认文件位置和格式正确，否则 process.env 补全、调试时变量缺失、HTTP Client 中 @var = {{env.VAR}} 会全部失效。
为什么装了 EnvFile 插件还是不生效
EnvFile 插件只在满足以下全部条件时才真正起作用：
- 插件已安装且重启了 WebStorm（Preferences → Plugins → 搜索
EnvFile→ Install → Restart IDE） -
.env文件位于项目根目录（即含package.json或tsconfig.json的目录），不能放在src/或config/子目录下 - 文件名严格为
.env（不是.env.local、.env.development等；多环境文件需额外配置） - 文件内容符合 dotenv 格式：无空格、无引号包裹（
API_URL=https://api.example.com✅，API_URL="https://api.example.com"❌）
如何让 .env.local 或 .env.development 也被识别
EnvFile 插件默认只读 .env。要支持其他命名，需手动编辑插件配置：
- 打开 Preferences → Other Settings → EnvFile
- 在
Files to load区域点击+，添加新行：.env.local - 如需按 NODE_ENV 自动加载，可填多行：
.env、.env.{{NODE_ENV}}（注意：此写法依赖插件版本 ≥ 4.0，旧版不支持变量占位） - 勾选
Auto-load files on project open，避免每次重启都手动触发
HTTP Client 里引用 .env 变量失败的常见原因
即使 EnvFile 插件已生效，HTTP Client（.http 文件）中仍可能无法解析 {{env.MY_VAR}}，因为：
- HTTP Client 的环境变量上下文与 Node.js 运行时分离——它不读
process.env，只读 EnvFile 插件加载的键值对 - 必须在
.http文件顶部显式声明环境块，例如：### Environment @host = {{env.API_URL}} @token = {{env.AUTH_TOKEN}} - 若
.env中定义的是PORT=3001，HTTP Client 中不能直接写:{{env.PORT}}作为端口——它只接受字符串拼接，需写成@url = {{env.API_URL}}:{{env.PORT}}再使用GET {{url}}/health
调试时 process.env 依然为空？检查运行配置
EnvFile 插件不影响 Node.js 调试进程的环境变量注入。你在代码里打的断点看到 process.env.MY_VAR === undefined，大概率是运行配置没传参：
- 打开 Run → Edit Configurations… → 选中你的 Node.js 配置
- 在
Environment variables栏中，**不要留空**，至少填一个占位符，例如：NODE_ENV=development - WebStorm 不会把 EnvFile 加载的变量自动注入到 Node 进程，必须显式复制过去（可手动粘贴，或用插件
EnvFile的右键菜单 “Copy env vars to run configuration”） - 如果用了
cross-env，删掉运行配置里的Application parameters，否则会和Environment variables冲突
最易被忽略的一点：EnvFile 插件加载变量是静态的——它不会监听 .env 文件变更并热更新。改完变量后，要么重启 WebStorm，要么右键 .env 文件 → “Reload EnvFile”。
