热门关键字:
jquery > jquery教程 > html5 > vue中使用proxy配置不同端口和ip接口

vue中使用proxy配置不同端口和ip接口

611
作者:管理员
发布时间:2020/3/22 10:24:06
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=1081

  问题描述:

  使用vue-cli创建的项目,开发地址是localhost:8080,由于后台开发不同的模块,导致每个模块请求的ip和端口号不一致

  例如:http://192.168.10.22:8081或者http://192.168.10.30:9999

  解决问题:

  在vue.config.js中配置不同的端口号

  module.exports={

  publicPath:process.env.NODE_ENV==='production'?'./':'/',

  devServer:{

  open:true,

  proxy:{

  '/monitor':{//配置的变量

  target:'http://192.168.10.30:9999',//需要请求的第三方接口

  changeOrigin:true,//开启代理:

  在本地会创建一个虚拟服务器,然后发送请求,并同时接收请求,

  这样服务端和服务端进行交互就不会有跨域问题

  pathRewrite:{//这里重写路径,如果monitor本身不存在接口路径中,一定要写成空!!!

  '^/monitor':''

  },

  ws:false

  }

  }

  }

  }

  在调用该接口的时候,需要写上'/monitor/'

  exportconstgetDictionary=((params)=>{

  return_axios({

  url:'/monitor/keypersonnel/getDictionaryForType',

  method:'post',

  data:params

  })

  })

  备注:proxy代理只在本地测试的开发环境有效,在部署到线上的时候应该怎么区分呢

  问题:

  若项目中不同模块请求不同ip和端口的接口,应该怎么设为可配置的呢,后端可以修改的,避免由于接口问题导致的不断的打包上线

  思路一:在public目录下放置json文件,配置的时候,去读取json文件

  <template>

  <divclass="er">

  <el-scrollbarstyle="height:100%">

  <divclass="ds">

  <img

  class="sdde"

  :src='`${publicPath}imges/but_play.png`'

  >

  </div>

  </el-scrollbar>

  </div>

  </template>

  <script>

  exportdefault{

  data(){

  return{

  publicPath:process.env.BASE_URL

  }

  },

  components:{

  }

  }

  </script

  结果:失败!给图片的src赋值成功,但是在create中按照同样的方法去require这个json文件,还是报路径错误





如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:html
友荐云推荐