在运行create-react-app构建脚本时如何设置build .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执行a 一样设置其他值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"
  }
}

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再次运行）以检测环境变量的变化。