react配置生产环境和测试环境地址

写在前面

之前一直写关于vue的文章，经常看我文章的可能从上篇文章就知道了我已经不写vue了，以后就写react了，会持续更新，今天说一下我搭建框架的时候配置不同环境的步骤，大家可以借鉴以下，也可以自己搞一下！

在项目根目录创建两个环境文件

• .env.development
• .env.production

文件内容

• .env.developemnt

REACT_APP_BASE_URL = 'https://test.com'
REACT_APP_ENV = 'development'

• .env.production

REACT_APP_BASE_URL = 'https://production.com'
REACT_APP_ENV = 'production'

配置package.json[scripts选项中添加如下代码]

    "build:prod": "cross-env REACT_APP_ENV=production react-app-rewired build",
    "build:dev": "cross-env REACT_APP_ENV=development react-app-rewired build",

在这里插入图片描述

安装cross-env插件，进行识别环境地址

• 使用npm安装

npm i -D cross-env

• 使用yarn安装

yarn add cross-env

PS：如果安装失败可以删除本地的node_modules文件，清除缓存以后继续安装，如果还是安装失败，看具体的报错信息，无非以下几种

• 文件夹权限不够 使用sudo进行安装
• 代理有问题，找一个淘宝镜像进行安装
• 命令输入错误，复制上面的命令进行安装
• 还有别的错误的话，就截图到评论区，看到会回复

使用

在你统一配置接口请求地址的js文件中进行获取当前的接口地址

const baseUrl = process.env.REACT_APP_ENV === "production" ? process.env.REACT_APP_BASE_URL: "http://test.com";

PS: 当然这里你可以自己配置很多的地址在里面，自己执行的时候找到对应的地址信息即可，如果一个测试环境中有很多测试地址，可以直接使用一个对象进行接收，获取的时候不使用三元运算符，直接使用if 判断当前的REACT_APP_ENV的值，或者使用switch:case结构也可以实现。

注意

这里的.env.developemnt和.env.production文件里面的变量必须是REACT_APP_开头的变量，不然是不被解析的，另外不可以直接使用NODE_ENV这个变量，不会被解析！

打包部署

• 生产环境：

yarn build:prod

• 测试环境：

yarn build:dev

本地测试

• serve

serve ./build/