React项目基于Webpack如何配置多环境.env文件变量注入process.env

1. 安装依赖 #

你需要安装dotenv-webpack插件，用来加载.env类文件的变量并注入到process.env中：

npm install dotenv-webpack --save-dev
# 或者用yarn
yarn add dotenv-webpack -D

2. 修改webpack配置文件 #

打开你的webpack.config.js，调整配置如下：
首先顶部引入依赖：

const Dotenv = require('dotenv-webpack');
const path = require('path');

将原有配置改为函数导出形式，根据运行时的mode加载对应环境变量文件，优先级为「对应环境的.env文件 > 通用.env文件」：

module.exports = (env, argv) => {
  // 获取当前运行的环境模式
  const currentMode = argv.mode;
  return {
    // 你原有webpack的其他配置（entry、output、module规则等保持不变）
    plugins: [
      new Dotenv({
        // 优先加载对应环境的变量文件
        path: path.resolve(__dirname, `.env.${currentMode}`),
        // 加载通用.env文件作为公共变量兜底
        defaults: path.resolve(__dirname, '.env'),
        // 可选配置：允许系统环境变量覆盖配置文件中的变量
        systemvars: true
      }),
      // 你原有其他插件配置保持不变
    ]
  }
};

3. 调整package.json脚本 #

新增test环境对应的运行命令，对应加载.env.test文件：

"scripts": {
  "dev": "webpack-dev-server --mode=development",
  "prod": "webpack --mode=production",
  "test": "webpack --mode=test"
}

4. 编写环境变量文件 #

在项目根目录下创建三类文件，变量统一使用键=值格式，值不需要加引号（除非值本身包含空格）：

• .env：存放所有环境通用的公共变量，示例：

# 通用配置
APP_NAME=我的React应用
APP_VERSION=1.0.0

• .env.development：开发环境独有变量，运行npm run dev时加载：

# 开发环境接口地址
API_BASE_URL=http://localhost:3000/api
DEBUG=true

• .env.test：测试环境独有变量，运行npm run test时加载：

# 测试环境接口地址
API_BASE_URL=http://test.example.com/api

• .env.production：生产环境独有变量，运行npm run prod时加载：

# 生产环境接口地址
API_BASE_URL=https://prod.example.com/api
DEBUG=false

5. 代码中调用变量 #

直接在React业务代码中通过process.env.变量名调用即可，示例：

console.log(process.env.APP_NAME); // 输出通用配置的应用名
console.log(process.env.API_BASE_URL); // 输出对应环境的接口地址

注意事项 #

• 不要在.env文件中存放敏感信息（比如账号密码、私钥），这些变量最终会被打包到前端静态代码中，所有用户都可以通过调试工具查看到
• 新增/修改.env文件内容后，需要重启本地开发服务才会生效

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