【大前端】React配置配置 开发（development）、生产（production）、测试（test）环境

在 React 项目中配置 开发（development）、生产（production）、测试（test）环境，一般有两种常见方案：

1. 使用环境变量（推荐，React 官方支持）
2. 使用多配置文件（如 webpack/vite 配置区分）

梳理一份完整的实践方案 👇

1. 使用 .env 环境变量文件（推荐）

React（使用 Create React App 或 Vite）天然支持环境变量文件。

（1）创建环境变量文件

在项目根目录下新建以下文件：

.env.development   # 开发环境
.env.production    # 生产环境
.env.test          # 测试环境

（2）环境变量命名规范

React 要求自定义环境变量必须以 REACT_APP_ 开头，例如：

# .env.development
REACT_APP_API_URL=http://localhost:3000/api
REACT_APP_DEBUG=true

# .env.production
REACT_APP_API_URL=https://api.example.com
REACT_APP_DEBUG=false

# .env.test
REACT_APP_API_URL=http://test.api.example.com
REACT_APP_DEBUG=true

（3）在代码中使用

console.log(process.env.REACT_APP_API_URL);
console.log(process.env.REACT_APP_DEBUG);

（4）自动区分环境

• npm start → 加载 .env.development
• npm run build → 加载 .env.production
• npm test → 加载 .env.test

如果你用 Vite，规则类似，只是必须以 VITE_ 开头：

VITE_API_URL=https://api.example.com

2. 使用 webpack/vite 配置文件区分（高级方式）

（1）webpack 方式

在 webpack.config.js 中使用 DefinePlugin 注入环境变量：

const webpack = require('webpack');

module.exports = (env) => ({
  plugins: [
    new webpack.DefinePlugin({
      'process.env.API_URL': JSON.stringify(env.API_URL),
    }),
  ],
});

运行时指定环境：

webpack --env API_URL=https://api.example.com

（2）Vite 方式

在 vite.config.js 中使用 define：

import { defineConfig } from 'vite';

export default defineConfig({
  define: {
    __API_URL__: JSON.stringify(process.env.VITE_API_URL),
  },
});

在代码中直接使用：

console.log(__API_URL__);

3. 结合配置文件方式（适合大型项目）

如果环境变量太多，可以抽象成配置文件：

📂 src/config/index.js

const env = process.env.NODE_ENV; // development | production | test

const configs = {
  development: {
    apiBaseUrl: process.env.REACT_APP_API_URL,
    debug: true,
  },
  production: {
    apiBaseUrl: process.env.REACT_APP_API_URL,
    debug: false,
  },
  test: {
    apiBaseUrl: process.env.REACT_APP_API_URL,
    debug: true,
  },
};

export default configs[env];

使用时：

import config from './config';

fetch(`${config.apiBaseUrl}/users`)
  .then(res => res.json())
  .then(data => console.log(data));

✅ 总结：

• 小型项目：用 .env.* 文件就够了，官方推荐。
• 中大型项目：.env.* + 配置文件组合，管理更清晰。
• 自定义构建工具：用 webpack/vite 的 DefinePlugin/define 来注入。

写一个 React 项目完整 demo，里面包含

1. 环境变量配置（.env.development / .env.production / .env.test）
2. 统一的 config 文件管理
3. 示例 API 请求

适合直接拷贝到 React 项目里使用。

1. 新建环境变量文件

在项目根目录新建以下文件：

.env.development

REACT_APP_API_URL=http://localhost:3000/api
REACT_APP_DEBUG=true

.env.production

REACT_APP_API_URL=https://api.example.com
REACT_APP_DEBUG=false

.env.test

REACT_APP_API_URL=http://test.api.example.com
REACT_APP_DEBUG=true

2. 新建配置管理文件

📂 src/config/index.js

const env = process.env.NODE_ENV; // development | production | test

const configs = {
  development: {
    apiBaseUrl: process.env.REACT_APP_API_URL,
    debug: process.env.REACT_APP_DEBUG === 'true',
  },
  production: {
    apiBaseUrl: process.env.REACT_APP_API_URL,
    debug: process.env.REACT_APP_DEBUG === 'true',
  },
  test: {
    apiBaseUrl: process.env.REACT_APP_API_URL,
    debug: process.env.REACT_APP_DEBUG === 'true',
  },
};

export default configs[env];

3. 示例 API 工具类

📂 src/utils/api.js

import config from '../config';

export async function fetchUsers() {
  try {
    const response = await fetch(`${config.apiBaseUrl}/users`);
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    if (config.debug) {
      console.error('API Error:', error);
    }
    throw error;
  }
}

4. 在组件中使用

📂 src/App.js

import React, { useEffect, useState } from 'react';
import { fetchUsers } from './utils/api';
import config from './config';

function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetchUsers().then(setUsers).catch(err => {
      console.error('加载用户失败', err);
    });
  }, []);

  return (
    <div>
      <h1>React 多环境配置 Demo</h1>
      <p>当前环境: {process.env.NODE_ENV}</p>
      <p>API 地址: {config.apiBaseUrl}</p>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name} ({user.email})</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

5. 启动方式

# 开发环境
npm start   # 自动读取 .env.development

# 生产环境（打包）
npm run build   # 自动读取 .env.production

# 测试环境
npm test   # 自动读取 .env.test

✅ 这样就有了：

• 三套环境配置（dev/prod/test）
• 统一的 config 文件（方便管理）
• 真实 API 调用 demo