react如何设置环境变量

1. 创建文件

//.env
REACT_APP_ENV = 'local'
REACT_APP_URL = 'https://test2222.baidu.com'

// .env.development
REACT_APP_ENV = 'development'
REACT_APP_URL = 'https://333.baidu.com'

// .env.production
REACT_APP_ENV = 'production' 
REACT_APP_URL =  'https://444.baidu.com'

2. 安装 dotenv-cli 的插件

npm i dotenv-cli -D

3. 编辑package.json文件

"scripts": {
    "start": "PORT=3434 dotenv -e .env react-scripts start",
    "build": "dotenv -e .env.development react-scripts build",
    "build:prod": "dotenv -e .env.production  react-scripts build"
  }

4. 测试

// App.js
console.log(
  'process.env',
  process.env.REACT_APP_ENV,
  process.env.REACT_APP_URL
);

// 开发环境
npm run dev

// 线上预生产环境 (需先使用express启动项目)
npm run build

// 线上生产环境 (需先使用express启动项目)
npm run build:prod

5. node express 启动项目

// mock/index.js
var express = require('express');
var app = express();
// var path = require('path')
app.use(express.static('./build/'));

app.listen(8888, () => {
  console.log('copy url and open it, go ahead', 'http://localhost:8888');
});