Windows11下VSCode自动加载.env文件变量的方法咨询

1. 通用工具：dotenv 系列 #

几乎所有主流语言都有对应的dotenv实现，核心就是自动读取目录里的.env文件并注入环境变量：

• JS/TS项目：安装dotenv包后，在项目入口最顶部加这段代码：

  // CommonJS 写法
  require('dotenv').config()
  // ES模块写法
  import dotenv from 'dotenv'
  dotenv.config()
  

  要加载指定环境的文件（比如.env.production），直接指定路径：

  dotenv.config({ path: '.env.production' })
  

• Python项目：装python-dotenv包，代码开头加：

  from dotenv import load_dotenv
  load_dotenv()  # 默认加载.env
  # 加载生产环境配置
  load_dotenv('.env.production')
  

2. VSCode 插件：Env File #

直接装VSCode的「Env File」插件，它能自动识别项目里的.env文件，调试/运行时自动加载变量。配置也简单：
在VSCode的launch.json里加envFile字段指定文件路径：

{
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "启动项目",
      "program": "${workspaceFolder}/index.js",
      "envFile": "${workspaceFolder}/.env"
    }
  ]
}

切换环境的话，把envFile改成.env.production就行。

3. 框架自带能力，不用额外装工具 #

很多现代框架已经内置了.env加载逻辑，省得折腾：

• Vue/Vite：Vite会自动识别根目录的.env、.env.production，启动时指定模式就自动加载对应文件：

  npm run dev    # 加载.env
  npm run build  # 加载.env.production
  

• React/CRA：Create React App默认支持.env、.env.production，注意变量要以REACT_APP_开头才能被项目读取。

4. 手动配置系统环境变量（应急用） #

要是不想用工具，也可以手动在Windows11里加：
右键「此电脑」→「属性」→「高级系统设置」→「环境变量」，在用户变量里加键值对，重启VSCode就生效。但这种方式不适合多环境切换，只适合全局通用的变量。

内容的提问来源于stack exchange，提问作者Em Ae