React使用cross-env

需求 #

有时候写项目做前后端,开发的时候api请求地址为本地,编译后需要请求相对路径,上线与开发的时候都需要手动修改url地址,使用env可以简化操作。

操作 #

首先安装cross-env

npm install cross-env

修改package.jsonscripts选项,加入参数

  "scripts": {
    "start": "cross-env REACT_APP_ENV=development react-scripts start",
    "build": "cross-env REACT_APP_ENV=production react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

在使用url时进行判断

const isDevelopment = process.env.REACT_APP_ENV === "development";
const baseUrl = isDevelopment ? "http://localhost:8080" : "";