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/
何处锦绣不灰堆 CSDN认证博客专家 vue nodejs git
人系于妻子舍宅,甚于牢狱。牢狱有散释之期,妻子无远离之念。情爱于色,岂惮驱驰。虽有虎口之患,心存甘伏。投泥自溺,故曰凡夫。透得此门,出尘罗汉。
相关推荐
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值