欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

webpack接口环境切换的配置-超简单

程序员文章站 2022-03-04 23:34:34
以前Vue的项目一直切换测试和正式环境时,一直习惯都是通过一个固定的常量,然后通过注释来切换环境的(会有个风险,就是在打包部署到正式环境时,如果忘记改这个切换环境,或者切换了,然后忘记cmd+s(mac) 保存代码的话,就直接打包,注:websotrm不像idea那样可以实时保存到位的,然后就部署到正式环境,那么问题就大了),所以,今天突然闲着没事,想优化这一操作习惯,随便看了下网上关于这块的配置方法,感觉有些繁琐,于是自己想着去实际了下自己想的方法,如果真是的了解了webpack,会发现很简单,具体操作如...

以前Vue的项目一直切换测试和正式环境时,一直习惯都是通过一个固定的常量,然后通过注释来切换环境的(会有个风险,就是在打包部署到正式环境时,如果忘记改这个切换环境,或者切换了,然后忘记cmd+s(mac) 保存代码的话,就直接打包,注:websotrm不像idea那样可以实时保存到位的,然后就部署到正式环境,那么问题就大了),所以,今天突然闲着没事,想优化这一操作习惯,随便看了下网上关于这块的配置方法,感觉有些繁琐,于是自己想着去实际了下自己想的方法,如果真是的了解了webpack,会发现很简单,具体操作如下:

项目首先是通过Vue-cli创建的空项目

第一步,config文件夹 webpack接口环境切换的配置-超简单

webpack接口环境切换的配置-超简单这里需要理解一点就是,process本身就是可以当做一个全局对象来看待的,可以通过下图来得知

webpack接口环境切换的配置-超简单

所以,用来做环境切换岂不是刚好嘛~

第二步,axios中配置的baseURL直接取刚设置的变量

webpack接口环境切换的配置-超简单

第三步,查看package.json这个文件里配置的指令(这里就是默认的)webpack接口环境切换的配置-超简单

当执行 npm run dev时,就是执行的测试环境的baseURL,具体请看 webpack.dev.conf.js里面引用的

webpack接口环境切换的配置-超简单

就是执行的dev.env,所以此时的环境就是测试环境的,当然如果切换到正式环境,也是可以再仿写个指令的,然后指向prod.env就是了

注:这里再说说 打包指令,npm run build 不就是执行的build.js文件嘛,而build.js文件中如上图中,已经默认是production了,所以,打包后生成的dist文件夹,然后请求的接口域名就是正式环境的,不需要更改

综上:其实就是先分别在dev和prod配置文件添加个全局变量 BASE_URL,然后再在axios中的获取赋值就行了,这样打包部署时,根本不需要再去手动切换了,至于网上千篇一律的一大堆,看着真的繁琐了。。

本文地址:https://blog.csdn.net/wqs1028/article/details/108854688

相关标签: H5