如何通过配置文件动态修改axios请求的baseURL

来源:11-4 上传组件开发

rookie_white

2020-09-13

老师你好。
使用技术栈: vue 2.6 、vue-cli3.0、axios
我工作中遇到这么一个问题,现在的项目里的axios的baseURL都是通过.env.dev的配置文件来配置的,但是我们有好几个环境(生产、测试、开发等等),每次发布到不同的环境都需要手动更改配置文件中对应的URL,每次都需要重新打包部署一份,这样很浪费时间。
我在网上搜索了很多关于"如何通过配置文件去动态修改请求地址",大致做法如下:
1.在public或者static等静态目录建立一个config.js 直接在index.html引人这个config.js,但这样就会在window上暴露了这个变量,会有风险。
2.在public或者static等静态目录建立一个config.json,然后在main.js通过axios先去获取这个json返回的数据,成功之后在Vue.prototype.baseURL 赋值对应的baseURL,之后在调用new Vue(),但是这种只能在..vue的文件上获取到这个baseURL.
http://img.mukewang.com/szimg/5f5dfbc409afef5b07890295.jpg
http://img.mukewang.com/szimg/5f5dfd36096eeedb09980413.jpg

我期望的是:
http://img.mukewang.com/szimg/5f5dfceb09fd1e9910330387.jpg能够直接在axios调用静态方法create的时候,把预期的baseURL传入到baseURL中.
请问老师,有什么好的解决思路吗?谢谢老师。

写回答

1回答

扬_灵

2020-09-14

同学你好,你可以看一下vue-cli提供的环境变量配置,创建.env.production文件和.env.development文件 。详细配置可以看一下这篇文档。 https://zhuanlan.zhihu.com/p/51746015 如果不能解决你的问题,可以继续追问。

0
0

Vue Element+Node.js开发企业通用管理后台系统

基于Element的中后台课程,一套中小型企业通用的后台管理系统

2829 学习 · 1716 问题

查看课程