如何在React项目的yarn start/build脚本中传入环境变量？

当然可以直接给yarn命令动态传变量！你之前的尝试没生效，主要是因为env-cmd的变量优先级规则——它默认会覆盖你提前设置的环境变量。下面给你几个靠谱的解决方案，按需选择：

方案1：让命令行变量优先于.env文件（推荐） #

修改package.json里的脚本，给env-cmd加上--no-override参数，这样env-cmd只会加载.env文件中不存在的变量，不会覆盖你命令行传入的变量：

"start": "cross-env NODE_ENV=development env-cmd --no-override .env node server",
"build": "cross-env NODE_ENV=production env-cmd --no-override .env.prod node server"

然后运行时直接在命令后追加变量即可：

# 开发环境临时指定API_URL
yarn start API_URL="https://dev-custom-api.com"

# 生产构建时自定义API_URL
yarn build API_URL="https://prod-custom-api.com"

方案2：完全跳过env-cmd，手动组合变量 #

如果你的.env文件内容不多，可以直接在命令行加载.env变量，再追加自定义变量（后者会自动覆盖前者）：

先修改脚本去掉env-cmd：

"start": "cross-env NODE_ENV=development node server",
"build": "cross-env NODE_ENV=production node server"

然后运行时用以下命令：

# 加载.env所有变量 + 自定义API_URL
yarn start $(cat .env | xargs) API_URL="https://custom-api.com"

方案3：Docker部署时的优化 #

既然你是在Docker容器内构建，更优雅的方式是在镜像构建/容器运行时传入变量，不用修改yarn脚本：

1. 在Dockerfile里定义构建参数和环境变量：

# 接收构建时传入的API_URL
ARG API_URL
# 将变量注入到React应用（注意：create-react-app要求变量前缀为REACT_APP_）
ENV REACT_APP_API_URL=$API_URL

# 安装依赖
COPY package.json yarn.lock ./
RUN yarn install

# 构建应用
COPY . .
RUN yarn build

2. 构建镜像时传入变量：

docker build --build-arg API_URL="https://docker-api.com" -t my-react-app .

关键提醒：React变量前缀 #

如果你的React应用是用create-react-app创建的，必须给环境变量加上REACT_APP_前缀（比如REACT_APP_API_URL），否则变量不会被注入到最终的构建产物中，你在组件里就访问不到process.env.API_URL啦！

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