react项目配置环境变量

Posted 2023-02-08 骑着代马去流浪

1，暴露配置

npm run eject

2，安装cross-env

npm i cross-env -D

3，创建配置文件

在项目目录下分别创建

.env写入公共配置，

.env.development开发环境下配置，

.env.production生成环境下配置

文件名视情况而定，必须要以.env开头

内容写入变量，例如.env.development：

REACT_APP_NODE_ENV='development'
REACT_APP_ENV='development'
REACT_APP_BaseUrl='http://localhost:5000/api'
REACT_APP_apiUrl='http://localhost:4000'
REACT_APP_PORT=5000

4，配置package.json

  "scripts": 
    "start": "cross-env REACT_APP_NODE_ENV=development node scripts/start.js",
    "build": "cross-env REACT_APP_NODE_ENV=development node scripts/build.js",
    "start:prod": "cross-env REACT_APP_NODE_ENV=production node scripts/start.js",
    "build:prod": "cross-env REACT_APP_NODE_ENV=production node scripts/build.js",
    "test": "node scripts/test.js"
  ,

运行项目后配置文件中的变量自动挂载到process.env对象下，直接引用即可

比如运行了npm start后，在项目中使用process.env.REACT_APP_apiUrl就能取值http://localhost:5000/api