react配置生产环境和测试环境地址
写在前面之前一直写关于vue的文章,经常看我文章的可能从上篇文章就知道了我已经不写vue了,以后就写react了,会持续更新,今天说一下我搭建框架的时候配置不同环境的步骤,大家可以借鉴以下,也可以自己搞一下!在项目根目录创建两个环境文件.env.development.env.production文件内容.env.developemntREACT_APP_BASE_URL = 'https://t
·
写在前面
之前一直写关于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/
更多推荐
已为社区贡献24条内容
所有评论(0)