react 环境变量

时间:2025-01-22 14:48:36
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、配置完成后需要重启项目