如何在ReactJS构建过程中自定义设置指定环境变量？

一、Create React App（CRA）项目原生支持方案 #

CRA默认支持以REACT_APP_为前缀的自定义环境变量，构建时会自动将这些变量注入到React代码中，无需额外配置。

1. 构建时传递变量

根据操作系统差异，在执行npm run build前直接设置目标变量：

• Linux/macOS 或 Git Bash：

  REACT_APP_API_URL=https://your-prod-api.com npm run build
  

• Windows CMD：

  set REACT_APP_API_URL=https://your-prod-api.com && npm run build
  

• Windows PowerShell：

  $env:REACT_APP_API_URL="https://your-prod-api.com"; npm run build
  

如果需要跨平台统一写法，先安装cross-env：

npm install cross-env --save-dev

再在package.json的scripts中配置：

{
  "scripts": {
    "build": "cross-env REACT_APP_API_URL=$API_URL react-scripts build"
  }
}

这里的$API_URL直接引用你构建脚本中已有的环境变量即可。

2. React代码中访问变量

在组件或工具函数里直接通过process.env.REACT_APP_API_URL获取值：

// 示例：在API请求工具中使用
import axios from 'axios';

const apiClient = axios.create({
  baseURL: process.env.REACT_APP_API_URL || 'https://default-api.com'
});

二、自定义Webpack配置的项目（eject后或非CRA项目） #

若项目是自行配置Webpack，可通过webpack.DefinePlugin手动注入环境变量：

1. 修改Webpack配置

在webpack.config.js的plugins数组中添加以下配置：

const webpack = require('webpack');

module.exports = {
  // 其他配置项...
  plugins: [
    new webpack.DefinePlugin({
      'process.env.REACT_APP_API_URL': JSON.stringify(process.env.REACT_APP_API_URL)
    })
  ]
};

注意必须用JSON.stringify处理变量值，确保注入到代码中的是合法字符串格式。

2. 构建传递与代码访问

和CRA项目逻辑一致，构建时设置REACT_APP_API_URL变量，代码中通过process.env.REACT_APP_API_URL读取即可。

关键注意点 #

• CRA项目的自定义变量必须以REACT_APP_开头，否则会被自动忽略；自定义Webpack项目可自行定义前缀，但建议统一规范。
• 这些变量是构建时静态注入的，构建完成后静态文件中的值就固定了，完全适配SPA部署到S3的场景。
• 无需依赖NODE_ENV的分支判断，直接传递构建脚本中动态获取到的实际值即可。

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