1. 首页
  2. 问题
  3. 如何在运行 create-react-app 构建脚本时设置构建 .env 变量？
小能豆

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

javascript

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

阅读 63

收藏
2024-06-05

共1个答案

小能豆

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

为了分离使用时使用的变量npm start，npm run build您可以创建另外两个环境文件 -.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”。

2024-06-05