React多环境配置

通常项目开发的时候,开发环境与生成环境的请求地址是不一致的,有时候本地测试可能会用到多个环境以便查看信息,因而我们的BASE_URL就不能写死,需要根据当前定义的变量来获取正确的地址。

官网提示

注意:你必须以 REACT_APP_ 开头创建自定义环境变量。除了 NODE_ENV 之外的任何其他变量都将被忽略,以避免意外地在可能具有相同名称的计算机上公开私钥。更改任何环境变量都需要重新启动正在运行的开发服务器。

dotenv

  • 安装工具dotenv-cli
  • 在根目录下新建文件
// .env.development 开发的配置文件
REACT_APP_BASE_URL=https://xxxxx
REACT_APP_ENV=development

// .env.test 测试的配置文件
REACT_APP_BASE_URL=https://xxxxx
REACT_APP_ENV=test

// .env.production 生产的配置文件
REACT_APP_BASE_URL=https://xxxxx
REACT_APP_ENV=production

有关更多详细信息,请参阅dotenv 文档

  • 修改package.json中的scripts指定环境
"build:dev": "dotenv -e .env.development react-app-rewired build",
"build:pro": "dotenv -e .env.production react-app-rewired build",
  • 使用
  1. html中:%REACT_APP_ENV%
  2. js/jsx中:可以在process.env中访问

cross-env

cross-env设计是为了定义全平台兼容的环境变量命令

  • 安装 cross-env
npm install cross-env -D
或
yarn add cross-env -D
  • package.jsonscripts 里面添加代码
"start:dev": "cross-env REACT_APP_ENV=development react-app-rewired start",
"start:test": "cross-env REACT_APP_ENV=test react-app-rewired start",
"start:prod": "cross-env REACT_APP_ENV=production react-app-rewired start",

通过使用REACT_APP_ENV就可以获取到不同环境的变量,根据此变量就可以设置不同环境的地址。

参考地址:添加自定义环境变量

你可能感兴趣的:(React多环境配置)