使用env-cmd设置React项目环境变量

借助env-cmd设置环境变量, 避免每次手动修改代码

$ npm install env-cmd -D # 打包时将自定义变量注入到环境变量process.env中

创建.env文件

• 注意: 变量名一定要用REACT_APP_开头, 其他变量名(除NODE_ENV)会被忽略
• 注意: 修改变量后必须重新打包

// .env.dev
REACT_APP_API_URL=http://api-dev.example.com

配置scripts命令

// package.json
{
  "scripts": {
      "start": "react-scripts start",// development模式
    "build": "react-scripts build",// production模式

      // 使用development模式打包: 将.env.dev内的变量注入到环境变量中
    "start:dev": "env-cmd -f .env.dev npm run start",

      // 使用production模式打包: 将.env.dev内的变量注入到环境变量中
    "build:dev": "env-cmd -f .env.dev npm run build"
  }
}

读取变量

process.env.REACT_APP_API_URL // 读取变量