解决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 相关文章推荐
Use Word to Search for Files
Jun 15 Javascript
input 高级限制级用法
Mar 26 Javascript
Jquery升级新版本后选择器的语法问题
Jun 02 Javascript
浅析js封装和作用域
Jul 09 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
Nov 19 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
javascript实现对表格元素进行排序操作
Nov 18 Javascript
javascript实现右侧弹出“分享到”窗口效果
Feb 01 Javascript
node.js 中间件express-session使用详解
May 20 Javascript
JavaScript事件处理程序详解
Sep 19 Javascript
layui 监听表格复选框选中值的方法
Aug 15 Javascript
Jquery的autocomplete插件用法及参数讲解
Mar 12 jQuery
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
php URL编码解码函数代码
2009/03/10 PHP
php中使用DOM类读取XML文件的实现代码
2011/12/14 PHP
PHP判断手机是IOS还是Android
2015/12/09 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
解决PHP使用CURL发送GET请求时传递参数的问题
2019/10/11 PHP
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
2014/04/29 Javascript
js同源策略详解
2015/05/21 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
webpack vue 项目打包生成的文件,资源文件报404问题的修复方法(总结篇)
2018/01/09 Javascript
JavaScript设计模式之缓存代理模式原理与简单用法示例
2018/08/07 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
[01:03:59]2018DOTA2亚洲邀请赛3月30日 小组赛B组VGJ.T VS Secret
2018/03/31 DOTA
Python接收Gmail新邮件并发送到gtalk的方法
2015/03/10 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
Python内存映射文件读写方式
2020/04/24 Python
浅谈keras使用中val_acc和acc值不同步的思考
2020/06/18 Python
Numpy实现卷积神经网络(CNN)的示例
2020/10/09 Python
css3高级选择器使用方法
2013/12/02 HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
2013/01/09 HTML / CSS
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
俄语地区最大的中国商品在线购物网站之一:Umka Mall
2019/11/03 全球购物
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
介绍一下Prototype的$()函数,$F()函数,$A()函数都是什么作用?
2014/03/05 面试题
金融行业职业生涯规划范文
2014/01/17 职场文书
二年级小学生评语
2014/04/21 职场文书
文艺晚会策划方案
2014/06/11 职场文书
酒店餐厅2014重阳节活动策划方案
2014/09/16 职场文书
幼儿园见习报告
2014/10/30 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
python画条形图的具体代码
2022/04/20 Python