如何通过静态文件动态修改axios的baseURL

Question

老师你好。
使用技术栈： 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.

我期望的是:
能够直接在axios调用静态方法create的时候，把预期的baseURL传入到baseURL中.

请问老师，有什么好的解决思路吗？谢谢老师。

Answer 1

ustbhuangyi 2020-09-13 21:37:04

首先通过配置的方式也不一定每一次都要手动改吧，可以参考 https://cli.vuejs.org/zh/guide/mode-and-env.html

另外通过服务端下发 baseURL，即使放到 window 变量上，也不会有什么风险吧

• 提问者 rookie_white #1

  1.放在window变量上，如果在控制台上直接修改了变量，不就直接修改了吗？那baseURL不就错误了吗？
  2.老师，我意思是，只打包一次，然后直接通过配置文件，修改baseURL，部署到不同的环境中

• ustbhuangyi 回复 提问者 rookie_white #2

  关键是为何会在控制台修改这个变量呢，用户不会这么做呀，你的 baseURL 可以后端渲染模板的时候下发，比如挂载到 window 上，这样可以节省一次请求。