美文网首页
vue+axios打包后动态配置接口公共部分

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

作者: echo三文鱼 | 来源:发表于2018-09-20 14:33 被阅读0次

    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文件,修改里面的地址,那么所有的接口地址也会跟着改变。

    相关文章

      网友评论

          本文标题:vue+axios打包后动态配置接口公共部分

          本文链接:https://www.haomeiwen.com/subject/pffnnftx.html