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

Question

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

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

当我通过读取 .env 文件运行 npm start 时，它会起作用:

REACT_APP_API_URL=http://localhost:5555

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

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

Answer 1

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

要分离使用 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 设置为 product，因此它将自动使用 .env.product。其中设置的值将覆盖 .env 中的值。

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

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

编辑 2:如果您需要的不仅仅是开发和生产，请使用 env-cmd ，由 this comment 指定.