解决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 定义初始化数组函数
Sep 07 Javascript
jquery.ui.progressbar 中文文档
Nov 26 Javascript
JQUERY获取form表单值的代码
Jul 17 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
Javascript 中 null、NaN和undefined的区别总结
Apr 10 Javascript
[将免费进行到底]在Amazon的一年免费服务器上安装Node.JS, NPM和OurJS博客
Aug 18 Javascript
JsRender for index循环索引用法详解
Oct 31 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 Javascript
jQuery中.attr()和.data()的区别分析
Sep 03 jQuery
详解JavaScript作用域和作用域链
Mar 19 Javascript
用JS实现一个简单的打砖块游戏
Dec 11 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
如何用PHP做到页面注册审核
2017/03/02 PHP
javascript 通用简单的table选项卡实现
2010/05/07 Javascript
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
用函数模板,写一个简单高效的 JSON 查询器的方法介绍
2013/04/17 Javascript
Node.js实现批量去除BOM文件头
2014/12/20 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
react-native 封装选择弹出框示例(试用ios&amp;android)
2017/07/11 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
2017/10/31 Javascript
vue组件间通信子与父详解(二)
2017/11/07 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
2019/04/08 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
使用原生JS实现滚轮翻页效果的示例代码
2020/05/31 Javascript
Vue实现计算器计算效果
2020/08/17 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
2021/02/04 jQuery
[01:00:44]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第三局
2016/03/04 DOTA
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
python实现括号匹配的思路详解
2018/08/23 Python
Python多线程应用于自动化测试操作示例
2018/12/06 Python
Python 2/3下处理cjk编码的zip文件的方法
2019/04/26 Python
在Pycharm中使用GitHub的方法步骤
2019/06/13 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
利用HTML5绘制点线面组成的3D图形的示例
2015/05/12 HTML / CSS
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
J.Crew官网:美国知名休闲服装品牌
2017/05/19 全球购物
Troy-Bilt官网:草坪割草机、吹雪机、分蘖机等
2019/02/19 全球购物
英国手机零售商:Metrofone
2019/03/18 全球购物
error和exception有什么区别
2012/10/02 面试题
销售人员获奖感言
2014/02/05 职场文书
人事部经理岗位职责
2014/03/07 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
停电调休通知
2015/04/16 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书
长江七号观后感
2015/06/11 职场文书
浅谈音视频 pts dts基本概念及理解
2022/08/05 数码科技