解决vue中使用proxy配置不同端口和ip接口问题


Posted in Javascript onAugust 14, 2019

问题描述:

使用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/'

export const getDictionary = ((params) => {
  return _axios({
    url: '/monitor/keypersonnel/getDictionaryForType',
    method: 'post',
    data: params
  })
})

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

问题:

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

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

<template>
 <div class="er">
  <el-scrollbar style="height:100%">
   <div class="ds">
    <img
     class="sdde"
     :src='`${publicPath}imges/but_play.png`'
    >
   </div>
  </el-scrollbar>
 </div>
</template>
<script>
export default {
 data() {
  return {
   publicPath: process.env.BASE_URL
  }
 },
 components: {
 }
}
</script>

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

思路二: 在public中新建js文件,在js文件中,将地址挂载到window上,并在index的html文件中引入

// 配置线上的请求地址
window.serverUrl = {
  publicSentiment: 'http://192.168.10.22:8081',            // 舆情分析
  monitor: 'http://192.168.70.6:9999'                 // 重点人员监控
}

总结

以上所述是小编给大家介绍的解决vue中使用proxy配置不同端口和ip接口问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
JavaScript 无符号右移赋值操作
Apr 17 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
Jun 19 Javascript
javascript实现列表滚动的方法
Jul 30 Javascript
JS给Textarea文本框添加行号的方法
Aug 20 Javascript
JavaScript中ES6 Babel正确安装过程
Jul 18 Javascript
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
echarts学习笔记之图表自适应问题详解
Nov 22 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
Feb 24 Javascript
微信小程序上传图片实例
May 28 Javascript
微信小程序如何再次获取用户授权的方法
May 10 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 Javascript
小程序如何写动态标签的实现方法
Feb 05 Javascript
websocket4.0+typescript 实现热更新的方法
Aug 14 #Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 #Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
Aug 13 #Javascript
vue源码nextTick使用及原理解析
Aug 13 #Javascript
封装微信小程序http拦截器过程解析
Aug 13 #Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 #Javascript
微信小程序封装分享与分销功能过程解析
Aug 13 #Javascript
You might like
对javascript和select部件的结合运用
2006/10/09 PHP
Redis使用Eval多个键值自增的操作实例
2016/11/04 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
css3实现背景模糊的三种方式
2021/03/09 HTML / CSS
使用IE6看老赵的博客 jQuery初探
2010/01/17 Javascript
js里的prototype使用示例
2010/11/19 Javascript
基于node.js的快速开发透明代理
2010/12/25 Javascript
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
nodejs npm install全局安装和本地安装的区别
2014/06/05 NodeJs
js跨域请求数据的3种常用的方法
2015/12/01 Javascript
js匿名函数作为函数参数详解
2016/06/01 Javascript
JS实现Ajax的方法分析
2016/12/20 Javascript
Jquery实现无缝向上循环滚动列表的特效
2019/02/13 jQuery
Preload基础使用方法详解
2020/02/03 Javascript
nodejs实现百度舆情接口应用示例
2020/02/07 NodeJs
编写一个javascript元循环求值器的方法
2020/04/14 Javascript
[01:07:02]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD BO3 第三场 2月26日
2021/03/11 DOTA
PyQt5 pyqt多线程操作入门
2018/05/05 Python
python读取word文档,插入mysql数据库的示例代码
2018/11/07 Python
对python中Json与object转化的方法详解
2018/12/31 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
PyQt5如何将.ui文件转换为.py文件的实例代码
2020/05/26 Python
Python ellipsis 的用法详解
2020/11/20 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
海淘母婴商城:国际妈咪
2016/07/23 全球购物
优秀团员个人的自我评价
2013/10/02 职场文书
护士辞职信模板
2014/01/20 职场文书
大学班级文化建设方案
2014/05/06 职场文书
三分钟自我介绍演讲稿
2014/08/21 职场文书
献爱心大型公益活动策划方案
2014/09/15 职场文书
预备党员自我批评思想汇报
2014/10/10 职场文书
2014年自愿离婚协议书
2014/10/10 职场文书
OpenCV全景图像拼接的实现示例
2021/06/05 Python
python基础入门之字典和集合
2021/06/13 Python
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL