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

向右看齐 2023-01-17 11:52 225阅读 0赞

#### 写在前面 ####

> 之前一直写关于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",

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70]

#### 安装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/

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNDg1NDE0_size_16_color_FFFFFF_t_70]: /images/20221021/049935bbc58c4d368950e12837de7fd7.png