dotenv

dotenv 是什么？

dotenv 是前端 / Node.js 开发中最常用的环境变量管理工具，核心作用是把本地配置（如接口地址、密钥、端口号等）从代码中抽离到 .env 文件里，实现「配置和代码分离」，避免敏感信息（如 API 密钥、数据库密码）硬编码到代码中导致泄露，同时方便不同环境（开发 / 测试 / 生产）切换配置。

简单说：它能让你把 const API_KEY = "123456" 这种硬编码的配置，改成从 .env 文件读取，既安全又灵活。

---

核心意义

1. 安全：敏感信息（如密钥、数据库连接串）不提交到 Git 仓库，避免泄露；
2. 便捷：不同环境（开发 / 测试 / 生产）用不同 .env 文件，切换配置不用改代码；
3. 规范：符合「配置与代码分离」的开发最佳实践，团队协作更统一。

---

具体用法（以 Node.js/ 前端项目为例）

第一步：安装

# npm 安装
npm install dotenv --save-dev

# yarn 安装
yarn add dotenv -D

第二步：创建 .env 文件（项目根目录）

新建 .env 文件，写入需要的环境变量（格式：键=值，无引号、无空格）：

# .env 文件内容
API_BASE_URL=http://localhost:3000
APP_PORT=8080
SECRET_KEY=my_secret_123456

第三步：在代码中加载并使用

1. Node.js 项目（如 Express/Koa）

在项目入口文件（如 index.js）最顶部加载 dotenv：

// 加载 .env 文件（必须在代码最开头）
require('dotenv').config();

// 读取环境变量（process.env + 变量名）
console.log(process.env.API_BASE_URL); // 输出：http://localhost:3000
console.log(process.env.APP_PORT); // 输出：8080
console.log(process.env.SECRET_KEY); // 输出：my_secret_123456

// 实际使用示例（启动服务）
const express = require('express');
const app = express();
app.listen(process.env.APP_PORT, () => {
  console.log(`服务启动在 ${process.env.API_BASE_URL}`);
});

2. 前端项目（如 Vue/React）

前端项目需结合构建工具（Vite/Webpack），大部分主流工具已内置 dotenv 能力，无需手动加载：

• Vite 项目：直接创建 .env 文件，变量名需以 VITE_ 开头（Vite 规定）：

  # .env 文件
  VITE_API_BASE_URL=http://localhost:3000
  

  在代码中使用：

  console.log(import.meta.env.VITE_API_BASE_URL); // 输出：http://localhost:3000
  

• React/CRA 项目：变量名需以 REACT_APP_ 开头：

  # .env 文件
  REACT_APP_API_BASE_URL=http://localhost:3000
  

  在代码中使用：

  console.log(process.env.REACT_APP_API_BASE_URL);
  

第四步：进阶用法（多环境配置）

创建不同环境的 .env 文件，实现环境切换：

• .env：默认配置（所有环境通用）
• .env.development：开发环境配置
• .env.production：生产环境配置

以 Node.js 为例，启动时指定环境：

# 加载 .env.development
NODE_ENV=development node index.js

# 加载 .env.production
NODE_ENV=production node index.js

第五步：关键配置（避免踩坑）

1. .gitignore 排除 .env 文件：在 .gitignore 中添加 .env*（除了 .env.example），防止敏感信息提交到仓库：

   # .gitignore
   .env
   .env.development
   .env.production
   # 可保留示例文件（无敏感信息）
   # .env.example 不排除
   

2. 变量格式注意：

   • 不要加引号：KEY=value ✅，KEY="value" ❌（会包含引号）；
   • 不要加空格：KEY=value ✅，KEY = value ❌（会识别失败）；

3. 优先级：命令行传入的变量 > 环境特定的 .env 文件 > 通用 .env 文件。

---

总结

1. 核心作用：把配置从代码抽离到 .env 文件，安全管理敏感信息、便捷切换环境；
2. 核心用法：安装 → 创建 .env → 加载（Node.js 手动加载 / 前端构建工具自动加载）→ 通过 process.env/import.meta.env 读取；
3. 关键注意：敏感 .env 文件要加入 .gitignore，前端变量名需按框架规则加前缀（如 VITE_/REACT_APP_）。