103

我在我的 create-react-app 中使用以下环境变量：

console.log(process.env.REACT_APP_API_URL) // http://localhost:5555

当我npm start通过读取.env文件运行时它可以工作：

REACT_APP_API_URL=http://localhost:5555

如何http://localhost:1234在执行时设置不同的值npm run build？

这是我的package.json文件：

{
  "name": "webapp",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.9.0"
  },
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}
4

5 回答 5

178

我想您现在已经可以正常工作了，但是对于发现此问题的其他任何人，您可以.env在“create-react-app”项目根目录的文件中设置默认环境变量。

要分离出使用时使用的变量npm start，npm run build您可以再创建两个 env 文件 -.env.development和.env.production.

npm start将设置REACT_APP_NODE_ENV为development，因此它将自动使用该.env.development文件，并npm run build设置REACT_APP_NODE_ENV为production，因此它将自动使用.env.production. 这些中设置的值将覆盖您的.env.

如果您正在与其他人一起工作，并且仅具有特定于您的机器的值，则可以通过将这些值分别添加到新文件中来.env.development覆盖.env.production这些.env.development.local值.env.production.local。

编辑：我应该指出您设置的环境变量必须以“REACT_APP_”开头，例如。“REACT_APP_MY_ENV_VALUE”。

编辑 2：如果您需要的不仅仅是开发和生产，请使用env-cmd ，如此评论所指定的。

于 2017-09-22T14:22:49.777 回答
57

你可以process.env.NODE_ENV这样使用：

const apiUrl = process.env.NODE_ENV === 'production' ? process.env.REACT_APP_PROD_API_URL : process.env.REACT_APP_DEV_API_URL;

你需要拥有REACT_APP_PROD_API_URL并REACT_APP_DEV_API_URL设置。

或者，如果生产 URL 始终相同，您可以简化它：

const apiUrl = process.env.NODE_ENV === 'production' ? 'https://example.com' : process.env.REACT_APP_DEV_API_URL;

Create React AppNODE_ENV在构建时为您设置为“生产”，因此您无需担心何时将其设置为生产。

注意：您必须重新启动服务器（例如npm start再次运行）以检测环境变量的变化。

于 2017-02-25T18:12:34.063 回答
44

如果您想使用单独的 dotenv 文件来构建和/或部署到单独的环境（stage、prod），那么您可以像这样使用env-cmd：

npm install --save-dev env-cmd
./node_modules/.bin/env-cmd -f ./stage.env npm build

然后相应地更新您的package.json：

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:stage": "env-cmd -f ./.stage.env npm run-script build"
  },

然后构建你只需运行这个 shell 命令：

npm run build:stage
于 2019-05-24T18:37:04.857 回答
14

安装“env-cmd”包

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy": "gh-pages -d build",
    "start:qa": "env-cmd -f .env.qa react-scripts start",
    "build:qa": "env-cmd -f .env.qa react-scripts build"
  },

如果我们想在本地运行 qa 环境，请使用 npm run start:qa

于 2019-12-03T14:43:36.917 回答
13

此外，它可以在没有额外依赖的情况下完成：

"scripts": {
  "build": "sh -ac '. ./.env.${REACT_APP_ENV}; react-scripts build'",
  "build:staging": "REACT_APP_ENV=staging npm run build",
  "build:production": "REACT_APP_ENV=production npm run build"
},

并拥有相应.env.staging的.env.production文件

于 2021-02-10T13:58:54.527 回答