理解Axios的baseUrl

489 阅读2分钟

在我最近的项目中我遇到这样一个问题,因为这个项目是个老的vue项目,遇到的问题就是axios的baseUrl。

axios的baseUrl

先看我这个项目的是怎么配置这个baseUrl的

image.png 就是判断env 然后赋值不同的url image.png 然后这个文件导出默认的development image.png 先说下我的理解:本地使用代理那这个baseUrl为空我觉得没啥问题,那么发布测试、开发、正式的时候因为我们这运维配置了自动化部署,直接在网页上点一下就行了,而且请求前缀也不用配置,以为是运维给配好了。结果就在上周开发的时候,突然说要换请求前缀域名,那时我就说让运维改一下,结果主管跟我说跟人家有啥关系,然后我说我在仔细去看下。 那时我就想他没配置怎么发测试环境就是请求的测试域名,开发就请求开发域名的呢?然后我了他那个打包命令也没有配置什么模式啥的

image.png 然后我突然明白过来这个baseUrl不管咋弄都是那个空因为他写死了development,这时候我就去查axios的baseUrl为空的时候请求前缀取的啥,带着这个疑问我去ai了一下

image.png 得到了我想要的答案,每个环境都是不同的域名为空的时候就是去的当前页面的协议主机端口,这是我第一次知道这个问题,估计是太菜了。 还有一个问题就是如果的你baseUrl写成了//// 那么他不会自动给你拼上那么多,你不写也会给你加上组成正确的url

image.png

image.png 如果是/s啥的 会自动拼接上 后面我就使用env环境变量结合vuecli 的--mode模式根据不同的环境配置不同的域名,但我这个项目也踩了一个坑,就是设置test环境时打包发上去会报错,但我自己拉了个新的vue2项目就不会,不知道什么问题,后面把test改成了ceshi就没啥问题了

image.png

这就是我的踩坑之旅,记录一下,大家多多交流