如何为反应应用程序设置环境变量？

Posted 2023-02-19

【中文标题】如何为反应应用程序设置环境变量？

【英文标题】：How to setup the env variable for the react app?

【发布时间】：2021-05-27 14:45:14

【问题描述】：

我的 react 应用程序在 http://localhost:3000 上运行，我想为不同的环境开发、生产、登台和本地设置 env 变量。

我在不同环境下的 react 应用 url 是（我在嘲笑我的 url）

local = http://localhost:3000
development = http://react.developmet.com
production = http://react.production.com
stage = http://react.stage.com

寻找一种解决方案，我如何为不同的环境设置 env var。

将我的方法添加到同一件事上只是想知道这种方法好还是不好。

以及如何在暂存环境中实现同样的效果

我创建了一个 environment.js 文件。

let BASE_URL = http://localhost:3000

//check for environment
if (process.env.REACT_APP_ENV = "development") 
  BASE_URL = "http://react.developmet.com"

if (process.env.REACT_APP_ENV = "production") 
  BASE_URL = "http://react.production.com"


export BASE_URL

还更新了我的运行脚本

"scripts": 
     "dev":"REACT_APP_ENV=development npm start",
     "prod":"REACT_APP_ENV=productionnpm start",
     "build:dev":"REACT_APP_ENV=development npm run-script build",
     "build:prod":"REACT_APP_ENV=production npm run-script build",
    

【问题讨论】：

***.com/questions/42182577/…

【参考方案1】：

您可以使用env-cmd 来管理多个env 文件的构建：

安装：

yarn add env-cmd -D

创建环境文件

在根项目级别创建文件夹envs 创建.env 文件（根据需要创建）

例如envs/.env.dev、envs/.env.prod、envs/.env.staging 等

.env 示例（例如envs/.env.prod）文件

REACT_APP_API_HOST=http://my-prod-api.example.com
REACT_APP_ANY_OTHER_VAR=some_value

在 package.json 文件中配置脚本：

"scripts": 
    "start": "react-scripts start",
    "eject": "react-scripts eject",
    "dev": "env-cmd -f envs/.env.dev react-scripts build",
    "prod": "env-cmd -f envs/.env.prod react-scripts build",
    "staging": "env-cmd -f envs/.env.staging react-scripts build",
  ,

进行构建：

$ yarn dev // to make build for dev env
$ yarn prod // to make build for prod env
$ yarn staging // to make build for staging env

PS：你也可以使用npm 命令。我使用yarn 仅用于示例目的。

【讨论】：

在 .env.dev 文件中我需要传递像 REACT_APP_DEV = react.developmet.com 这样的 url 吗？

是的，请查看我更新的答案。我添加了一个示例 .env 文件。您可以将环境变量放入文件中。

当我为 dev usnig npm run build:dev 进行构建时，这将返回我的生产环境（在 porcess.env，.NODE_ENV 中）所以，当我得到我的开发 url 为未定义时我在安慰它