在vue中配置不同的代理同时访问不同的后台操作

如果和不同的后台调接口，如果后台接口没有合到一起，前端可以配不同的代理来共同访问他们的接口

在config文件夹下的index.js中设置如下：

proxyTable: {
  '/api/login': { // 第一个代理：此处的路径是所有接口前面相同的部分，用来匹配带有这部分路径的
    target: "http://192.168.100.209:8910",
    changeOrigin: true,
    secure: false
  },
  '/api/supplier': { // 设置第二个代理
    target: "http://192.168.101.26:8910",
    changeOrigin: true,
    secure: false
  },
}

补充知识：vue项目开发环境下实现与多个后台进行联调

在配置开发环境设置反向代理的地方设置反向代理

 proxyTable: {
      '/jk': {
        target: 'http://10.200.101.121:8090/',
        //target: 'http://118.24.184.180:8080/',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api', //重写,
        }
      },
      '/wxapi': {
        target: 'http://10.200.102.141:8089',
        changeOrigin: true,
        pathRewrite: {
          '^/wxapi': '/wxapi', //重写,
        }
      },
      '/wxttxx': {
        target: 'http://10.200.102.141:8089',
        changeOrigin: true,
        pathRewrite: {
          '^/wxttxx': '/wxttxx', //重写,
        }
      }
    },

这样就可以根据不同的后台进行联调了

以上这篇在vue中配置不同的代理同时访问不同的后台操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue配置多代理服务接口地址操作

    一.介绍 随着微服务架构的流行,后台项目逐渐被拆分成不同的模块进行通信,但是前端还是只有一个项目所以在访问不同模块后台时,需要请求不同的地址,在vue项目中,通过配置代理可以进行后端服务器接口地址访问,当需要访问不同微服务的后端接口时就需要配置不同的地址. 二.代码 config/index.js文件中配置代理地址: 自己项目中定义所有接口api管理文件src/api/getData.js: 页面调用接口时xxx.vue 三.总结 1.vue使用配置多代理地址方式可以访问不同的项目地址,使用以上

  • Vue多环境代理配置方法思路详解

    背景: 多人协作模式下,修改代理比较麻烦,而且很容易某个开发人员会修改了vue.config.js文件后提交了. 第一,很容易引起冲突. 第二,很容易出现代理错误,需要排查.而且现在微服务盛行,在生产环境下有网关配置,不会出错,但是在本地调试会造成麻烦,如修改了代理地址需要同步修改代理中的地址,很麻烦也很容易出错. 解决思路: 1.开发中定义常量js文件,例如constants.js.用户存放各个服务需要代理的服务名. let api = "" let loginServer = &q

  • 在vue中配置不同的代理同时访问不同的后台操作

    如果和不同的后台调接口,如果后台接口没有合到一起,前端可以配不同的代理来共同访问他们的接口 在config文件夹下的index.js中设置如下: proxyTable: { '/api/login': { // 第一个代理:此处的路径是所有接口前面相同的部分,用来匹配带有这部分路径的 target: "http://192.168.100.209:8910", changeOrigin: true, secure: false }, '/api/supplier': { // 设置第二

  • vue中配置scss全局变量的步骤

    vue中配置scss全局变量的步骤

    在写项目的过程中,如果用的是scss来编写样式代码,常常需要定义各种变量,例如主题色.主字号之类的,因此我们会把这些变量写到一个单独的_variable.scss文件内,但是每次都要在vue单文件内引入这些变量未免太繁琐了,所以有没有办法可以默认把变量文件作为全局文件进行引入呢?答案是肯定的,可以用下面的方法进行配置,可以根据当前使用的框架和环境来进行方法的选择. 一.使用vue-cli(即vue-cli2)脚手架时 1. 首先,需要安装一个loader,sass-resources-loade

  • vue中echarts的用法及与elementui-select的协同绑定操作

    vue中echarts的用法及与elementui-select的协同绑定操作

    1.vue中echarts的使用 引入echarts后 let myChart = echarts.init(document.getElementById('dsm'));//dsm为绑定的dom结构 var option = { //backgroundColor:"#111c4e", tooltip: { trigger: 'axis' }, legend: { //图表上方的图例显隐 data:['光合有效辐射'], textStyle: { color: '#fff' } }

  • 在Vue 中获取下拉框的文本及选项值操作

    方法1: <!-- element表单组件 --> <el-form :model="ruleForm" label-position="right" ref="ruleForm" // 被ref 标记的 status-icon size="small" inline :rules="rules" label-width="150px" class="demo

  • Vue中如何实现proxy代理

    Vue 框架开发的时候,会遇到跨域的问题,可在config/index.js 里配置proxyTable内容,使用proxy 代理. // config/index.js 文件 proxyTable: { '/api': { target: 'http://192.168.149.90:8080/', // 设置你调用的接口域名和端口号 changeOrigin: true, // 跨域 pathRewrite: { '^/api': '/' } } }, 这里理解成用'/api'代替targe

  • 使用vue项目配置多个代理的注意点

    使用vue项目配置多个代理的注意点

    在Vue项目的开发过程中,为了本地调试方便,我们通常会在 vue.config.js 中配置 devServer 来在本地启动一个服务器,在这个选项中,我们会配置proxy 属性来将指向到本地的请求(例如: /api/action) 代理到后端的开发服务器上(例如: http://xxx.xxx.xxx/api/action) devServer: { port: 8081, proxy: { '/api/action': { target: 'http://192.168.200.106:81

  • vue中的proxyTable反向代理(亲测有用)

    vue中的proxyTable反向代理(亲测有用)

    目录 proxyTable反向代理 1.打开vue项目->config->index.js 2.打开一个vue页面 3.npm run dev 反向代理的实现原理 实现原理 程序运行过程 proxyTable反向代理 proxyTable的设置网上有的是,以前也没管过,但新公司的项目需要用到,所以就彻底研究一下,结果绕了好大的弯子! 注:每次设置完proxyTable,请一定要重启,刷新不好使   npm run dev! 开始前,请劳记上面操作,我就在这绕了很大的弯,一直以为页面刷新就行了,

  • 在Nginx服务器中配置mod_proxy反向代理的方法

    反向代理做法可以为网站安全做更高一步,像一些银行肯定是使用了反代理就是你进入代理服务器也得不到任何数据,下面我来介绍nginx用mod_proxy实现反向代理配置方法. 由于项目需要实现一个域名代理的功能 比如: 复制代码 代码如下: a.com/a.html=>b.com/b.html 也就是用a.com代理了所用b.com网站的请求,经过朋友介绍用apache的反向代理可以实现其目的,哥们试了一下,果然很爽.配置起来也超级的方便. (注意下面只介绍反向代理,正向代理等我用到了再介绍嘿嘿) 1

  • vue中配置后端接口服务信息详解

    vue中配置后端接口服务信息详解

    目录 vue配置后端接口服务信息 最重要一点 以此接口为例 vue与后端接口是如何进行接口请求的原理 最近遇到一个很奇怪的问题 附上如下图示 vue配置后端接口服务信息 最重要一点 配置完信息后,重新启动服务 npm run dev 需要在config下的index.js中 找到 module.exports = {   dev: {    } } 以此接口为例 dev: {     // Paths     assetsSubDirectory: 'static',     assetsPub

  • vue中配置mint-ui报css错误问题的解决方法

    vue中配置mint-ui报css错误问题的解决方法

    在vue2.0中引入了mint-ui后总是报一个css的错误 但是package.json中已经配置了css-loader style-loader ,webpack.config中也已经配置了css,还是报这个错误,相反,如果把webpack.config中css的配置注释掉就不会出错,这是为什么呢? 因为 在webpack.config中没有设置好css引入的目录,因为默认情况下我们只会引入/src/目录下的css, 但是mint-ui是要冲node_modules目录去引入的,所以在web

随机推荐