react http请求_通过Webpack全局配置开发环境和多种生产环境的请求地址
在线上项目的开发中,我们经常会有一个测试服务器一个正式服务器,当我们开发时我们会去使用测试服务器的接口地址,而发版时会把地址改为正式服务器的地址,因此我们可能会在两个地址来回切换(有可能还有更多环境,每个环境的请求地址都不同),甚至有时由于疏忽,会在发版时使用了测试服务器的地址。
这里,我通过webpack的definePlugin以三种方式来解决这个问题
官方文档时这么说的,我们可以通过配置这个插件,在[生产/开发]构建中使用不同的服务URL
具体使用:
第一种方式
直接在插件中写死,这样环境只能区分开发环境和生产环境 不能设置更多的环境
webpack.config.js
new
until.js
这样定义完我们就可以每次需要网络请求直接把host地址import进去
const
但是注意 一定要加/* eslint-disable no-undef */这句话
因为eslint认为这个全局变量是没有定义过的
我们直接使用可以拿到,但是eslint会让这里编辑失败
报错DEVELEPMENT is not defined
通过这句话,我们可以让eslint 对这段代码不做undefined判断
第二种方式
(这种方式实现是我早期使用的方法,第三种方式是第二种方式更优雅的实现,懒得看可以直接看第三种)
通过process.argv和配置文件.env.development的方式配置多种环境的请求地址
首先是.env.development配置开发环境的请求地址
其实这个的原理和第一种方法是一样的 只不过把开发环境的配置单独抽离出去了(根据webpack的文件系统,它会自动识别.env.development的配置)
wepack.config.js
new
这句话的意思是DefinePlugin引入.env文件的配置信息
.env.development
REACT_APP_API
然后我们任何文件都能通过process.env.REACT_APP_API访问到这个地址
console
控制台的输出:
这时其实我们已经拿到在.env.development 写入的全局变量,这时我们注意另外一个变量
console
这时控制台的输出是:
我们了解一下process.defineEnv是干什么的
node.js提供了process.argv来获取npm/yarn的命令参数
所以我们可以通过配置package.json来配置命令拿到我们全局变量
首先配置一个方法来解析参数
filterArg.js
module
修改wepack.config.js
new
然后配置package.json
"scripts"
我们测试一下npm run build:dev
输出process.defineEnv
console
控制台结果:
我们拿到了命令参数-api的值http:192.168.1.1
这样其实我们就达到了我们的效果
如果在开发环境我们就直接使用process.env.REACT_APP_API 的请求地址
当我们要运行在不同的生产环境时
我们就配置不同的build:xx 的 脚本 然后运行
在项目中使用process.defineEnv.REACT_APP_API
until.js
const
第三种方式(通过文件的方式优雅的实现第二种逻辑)
这里我们定义三种环境dev、pro、test(跟以前的开发环境、生产环境没有任何关系,是我们自己定义的三种环境)
首先我们先引入一个yargs
其实这个东西跟process.argv功能上并没有什么区别,但是process.argv的可配置性不高,所以这里使用yargs
$
这里我们同样定义一个文件来解析我们脚本里的参数
webpack.env.conf.js
// 定义参数配置
const argv = require('yargs').argv;// 获取脚本种的参数e
const env = argv.e;// require指定的环境配置文件 这个是一个文件名 看到下面你就理解了
const envConfigFile = "../config/env/" + env + ".env.js";// 将require的配置文件原封不动export回出去
module.exports = require(envConfigFile);
为了方面你们理解envConfigFile这个参数是干什么用的 我先把文件目录给你们展示出来
其实envConfigFile就是env 文件夹下面三个文件的名称
然后配置webpack
webpack.config.js
const
dev.env.js
'use strict'
pro.env.js
'use strict'
test.env.js
'use strict'
配置脚本
package.json
"scripts"
运行 npm run start:dev
输出:
useEffect
控制台:
这个方式配置是不区分webpack自己定义的开发环境和生产环境,是我们自己定义的dev、pro、test三种环境,所以npm start和npm run build是一样的
具体原理上的,方法1和方法2看明白了,其实这个很好理解 所以我写的解释可能少了些
总结:
如果我们的项目只有一个生产环境和开发环境时我推荐使用第一种配置方式,因为它非常简单快捷。
当我们有多个生产环境时,建议使用第三种或是第二种方式,千万不要直接在项目中写入多个host,然后在对环境中把其他host注释掉,这样写的话非常繁琐,还容易出错。
react http请求_通过Webpack全局配置开发环境和多种生产环境的请求地址相关推荐
- vue配置开发、测试、生产环境(proxy中获取process.env.NODE_ENV)
先是看了这个文章写的如何npm run build 的时候自动配置地址 参考文章"vue配置开发.测试.生产环境(不同环境,不同命令)_Amy_cloud的博客-CSDN博客_vue生产环境 ...
- php小程序开发实例,微信小程序全局配置开发实例
本文主要和大家分享微信小程序全局配置开发实例,主要以代码的形式和大家分享,希望能帮助到大家. 一.app.json 使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设 ...
- [配置]VUE中通过process.env判断开发,测试和生产环境,并分环境配置不同的URL HOST
[配置]VUE中通过process.env判断开发,测试和生产环境,并分环境配置不同的URL HOST process.env是什么? process.env 是 Node.js 中的一个环境对象.其 ...
- webpack 3 零基础入门教程 #13 - 生产环境 vs 开发环境
接着上一节来,我们要解决上一节所遇到的一个问题. 上一节提到,要让生产环境使用 extract-text-webpack-plugin 这个插件,而开发环境不使用,如何做到呢? 其实原理很简单,只要能 ...
- 详解Linux上iptables配置命令及常见的生产环境防火墙规则
本文出自:https://www.toutiao.com/a6743215775915442692/ http://www.safebase.cn/article-259542-1.html 摘要: ...
- mysql差异备份实现_结合Git实现Mysql差异备份,可用于生产环境
埋头苦干多年一直没写过文章,今天突发狂想,为LNMP阵营贡献一些力量.就从平时工作过程中的心得和一些技巧分享出来.今天就猿们最熟悉的Mysql开始宅鸟的开篇博客文章.欢迎猿们拍砖.转载. 注意:宅鸟的 ...
- eclipse 64位_如何安装调试 Java开发工具Eclipse和JDK环境
JRE是个运行环境,JDK是个开发环境.因此写Java程序的时候需要JDK,而运行Java程序的时候就需要JRE.而JDK里面已经包含了JRE,因此只要安装了JDK,就可以编辑Java程序,也可以正常 ...
- git mysql差异备份_结合Git实现Mysql差异备份,可用于生产环境
埋头苦干多年一直没写过文章,今天突发狂想,为LNMP阵营贡献一些力量.就从平时工作过程中的心得和一些技巧分享出来.今天就猿们最熟悉的Mysql开始宅鸟的开篇博客 埋头苦干多年一直没写过文章,今天突发狂 ...
- java已解密的登录请求_使用https协议解决掉顽固不化的已解密的登录请求
1.1 已解密的登录请求概述 在应用程序测试过程中,检测到将未加密的登录请求发送到服务器.由于登录过程所用的部分输入字段(例如:用户名.密码.电子邮件地址.社会保险号码,等等)是个人敏感信息,建议通过 ...
最新文章
- DIV层跟随鼠标位置显示提示
- Django中自定义实现RESTful API
- Spring 3.0 注解注入详解
- Nginx搭建部署Web服务器并与NFS结合搭建负载均衡服务器
- JSON与XML的选择
- IE6 的 hover 伪类 bug
- 【Django 2021年最新版教程3】新建一个WebApp项目并运行
- 蓝桥杯题目——平方回文数
- 「干货分享」50人+团队常用的一套PRD模板
- eclipse环境变量的配置
- 限量50件,属于创作者的、用代码设计的T恤
- 172Echarts - 象形柱图(Dotted bar)
- 整理38款国外的一些免费虚拟主机,云计算,看看你使用过哪几个
- 2022起重机械指挥考试模拟100题及答案
- 对国内GIS行业的思考
- 工业互联 智造未来 “2018 智造中国峰会•上海松江” 在上海市松江区隆重召开
- 国产免费数据仓库ETL调度自动化运维专家—TASKCTL
- [iTyran翻译]OpenGL ES 从零开始系列08:交叉存取顶点数据
- 机械键盘买青轴好还是茶轴好?
- 一个计算机高手的成长--转载
热门文章
- 世界人口钟实时数据_中美面积人口数据对比,2020年8月,值得了解的细节
- redux异步action_Redux数据状态管理
- 一条诡异的insert语句
- Spring为什么建议使用构造器来注入?
- 为什么面试你要35K,而HR只给你25K...
- 赛森机器人_对比评测3款最贵的扫地机器人,戴森性能太强了
- linux epoll 文件,Linux面试必知:一句话讲透epoll-文件句柄
- error 1309 mysql_MySQ登录提示ERROR 1045 (28000)错误如何解决
- C语言指出下列程序的错误,2012年计算机二级C语言精编教程第二章(8)
- idea 自动生成构造以及get、set方法