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

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

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

第一步，config文件夹 

这里需要理解一点就是，process本身就是可以当做一个全局对象来看待的，可以通过下图来得知

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

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

第三步，查看package.json这个文件里配置的指令（这里就是默认的）

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

就是执行的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