1、在项目根目录与src同级创建.env文件
.env为总环境配置 npm run build时读取
.为开发模式配置 npm start时读取
.为生产模式配置
.为测试模式配置
2、环境变量
(1)自定义环境变量
1、可以在其他文件访问的自定义环境变量必须以REACT_APP开头
REACT_APP_xxx=x x就是字符串,不需要添加引号
2、可以设置其他任意自定义变量,只能在本文件访问,不区分大小写
(2)使用其他环境变量
REACT_APP_xxx=$xx 必须使用$,否则会认为是字符串
(3)在tsx/js文件中使用
{.REACT_APP_NAME}
(4)在文件中使用
<title>%REACT_APP_xxx%</title>
3、NODE_ENV特殊内置环境变量
(1)读取
.NODE_ENV 中读取它。
(2)规范
当你运行 npm start 时,它总是等于 'development' ,
当你运行 npm test 它总是等于 'test' ,
当你运行 npm run build 来生成一个生产 bundle(包) 时,它总是等于 'production' 。
无法手动覆盖NODE_ENV。 这可以防止开发人员意外地将慢速开发构建部署到生产环境中。
5、通过cross-env配置
1、下载
cnpm install --save-dev cross-env
2、配置端口
在中
"start": "cross-env PORT=端口号 react-scripts start",
6、配置完成后需要重启项目