运行 create-react-app 构建脚本时如何设置构建 .env 变量？

Question

我在我的 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"
  }
}

原文由 sigmus 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以像这样使用 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 App 在构建时将 NODE_ENV 设置为“生产”，因此您无需担心何时将其设置为生产。

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

原文由 Andy_D 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我想你现在已经开始工作了，但是对于发现这个的任何其他人，你在“create-react-app”项目的根目录下的 .env 文件中设置默认环境变量。

分离使用 npm start 和 npm run build 和 .env.development 和 .env.production

npm start will set REACT_APP_NODE_ENV to development , and so it will automatically use the .env.development file, and npm run build sets 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 ，如 本评论 所指定。

原文由 Baldeep 发布，翻译遵循 CC BY-SA 3.0 许可协议