React 环境变量

常用.env文件种类

.env #无论什么环境都会加载(一般用于本地开发)
.env.development #测试开发环境加载
.env.production #生产环境加载

# 以上三个文件同时存在时,被引用的优先顺序。
.env.development > .env 
.env.production > .env

.env文件中变量定义

//自定义变量时,必须要以REACT_APP开头定义。

// .env文件
NODE_ENV = local // 这个变量根据启动方式自动判断
REACT_APP_URL = 'http://127.0.0.1/api'

// .env.development文件
NODE_ENV = development // 这个变量根据启动方式自动判断
REACT_APP_URL = 'http://alpha-test.shuzhiqiang.com/api'
// .env.production文件
NODE_ENV = production // 这个变量根据启动方式自动判断
REACT_APP_URL = 'http://prod.shuzhiqiang.com/api'

React中.env文件中定义的变量的使用方法

process.env.(变量名)
process.env.NODE_ENV
process.env.REACT_APP_URL

React的启动方式

开发环境

npm run start

生产环境

npm run build

serve -s build

由于npm run build运行之后生成的build文件需要在web服务器上公开才能访问，配置服务器比较麻烦，为了便捷，本次使用serve -s build命令来模拟生产环境

# 前提需要安装相应的依赖
npm install -g serve

# 启动命令
serve -s build