vue+axios打包后动态配置接口公共部分

1、最近有一个后台管理的项目,需要把前后端包括数据库都部署在别人的环境下,所以接口的路径是改变的,需要打包之后有一个文件可以统一修改所有接口的公共头部。
2、具体做法
a、现在vue-cli的static文件下面新建一个config.js

 window.g = {
    ApiUrl: 'http://120.24.81.195/visualrobot/api', // 配置接口地址,
    imgUrl:'http://120.24.81.195/visualrobot' //配置图片地址
  }

(ps:相当于在window下面新增了属性g,并增加了两个属性ApiUrl和imgUrl,后面的页面如果要用到直接window.g.url就可以得到)
b、在index.html页面引用config.js

     <script type="text/javascript" src="/static/config.js"></script>

c、在main.js里面设置公共头

     axios.defaults.baseURL = window.g.ApiUrl;

d、打包之后,static里面会多一个config.js文件,修改里面的地址,那么所有的接口地址也会跟着改变。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 1 Webpack 1.1 概念简介 1.1.1 WebPack是什么 1、一个打包工具 2、一个模块加载工具 3...
    Kevin_Junbaozi阅读 7,022评论 0 16
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,554评论 19 139
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 13,989评论 2 59
  • 电风扇不停地摇头 窗帘它也要跟着左右晃动 天花板的日光灯都已经灭了 月亮扔在山的那一头 黑暗里独坐着的人 你还在注...
    雨落偏安阅读 324评论 1 3
  • 林波是我的大学同学,是个毕业以后三十年似乎都没见上三面的男同学。 这几年有了微信,又有了简书,慢慢的,我们可以在彼...
    吉林市权红阅读 786评论 0 3

友情链接更多精彩内容