解决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 相关文章推荐
精解window.setTimeout()&amp;window.setInterval()使用方式与参数传递问题!
Nov 23 Javascript
jQuery ajax dataType值为text json探索分享
Sep 23 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 Javascript
vue分页组件table-pagebar使用实例解析
Nov 15 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 Javascript
webpack实现热加载自动刷新的方法
Jul 30 Javascript
JavaScript实现的浏览器下载文件的方法
Aug 09 Javascript
Vue 封装防刷新考试倒计时组件的实现
Jun 05 Javascript
通过angular CDK实现页面元素拖放的步骤详解
Jul 01 Javascript
React forwardRef的使用方法及注意点
Jun 13 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
咖啡豆要不要放冰箱的原因
2021/03/04 冲泡冲煮
Php Mssql操作简单封装支持存储过程
2009/12/11 PHP
PHP 调试工具Debug Tools
2011/04/30 PHP
php读取der格式证书乱码解决方法
2015/06/22 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
PHP线程的内存回收问题
2016/07/08 PHP
使用PHP+MySql实现微信投票功能实例代码
2017/09/29 PHP
php中try catch捕获异常实例详解
2020/08/06 PHP
prototype1.4中文手册
2006/09/22 Javascript
jquery得到iframe src属性值的方法
2014/09/25 Javascript
jQuery类选择器用法实例
2014/12/23 Javascript
jQuery实用技巧必备(下)
2015/11/03 Javascript
论JavaScript模块化编程
2016/03/07 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
2016/06/09 Javascript
javascript实现一个网页加载进度loading
2017/01/04 Javascript
JS实现的简单标签点击切换功能示例
2017/09/21 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
Vue开发中遇到的跨域问题及解决方法
2020/02/11 Javascript
Node.js 深度调试方法解析
2020/07/28 Javascript
Vue3为什么这么快
2020/09/23 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
[46:20]TFT vs Secret Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python中基本的日期时间处理的学习教程
2015/10/16 Python
windows下ipython的安装与使用详解
2016/10/20 Python
Django如何配置mysql数据库
2018/05/04 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
Java 中访问数据库的步骤?Statement 和PreparedStatement 之间的区别?
2012/06/05 面试题
毕业生优秀推荐信
2013/11/26 职场文书
模具专业毕业推荐信
2014/03/08 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
乒乓球兴趣小组活动总结
2014/07/08 职场文书
国际语言毕业生求职信
2014/07/08 职场文书
幼儿园见习报告范文
2014/10/30 职场文书
后进生评语大全
2015/01/04 职场文书
大学教师个人总结
2015/02/10 职场文书