码迷,mamicode.com
首页 > 其他好文 > 详细

react和vue配置本地代理

时间:2019-08-23 14:54:37      阅读:86      评论:0      收藏:0      [点我收藏+]

标签:配置   探讨   ora   ack   image   简单   管理   react   目录   

  React

  在react中配置开发环境下的本地代理相对比较简单,直接在package.json文件中修改即可。

技术图片

  但是这样做有其局限性,如果开发中代理多个接口的时候将无法满足需求,我们需要的是下面这种的能够代理多个接口的请求方式

proxy(/back, {

  target: http://172.20.1.148:8082,

  changeOrigin: true

})

  1):安装http-proxy-middleware管理包,npm i http-proxy-middleware --save

  2):在项目目录的src /下新建setupProxy.js文件,然后写入如下代码:

const proxy = require(‘http-proxy-middleware‘);

module.exports = function(app) {
  app.use(proxy(‘/api‘, { 
       target: ‘http://192.168.1.144:8181‘ ,
       secure: false,
       changeOrigin: true,
       pathRewrite: {
        "^/api": "/"
       },
       // cookieDomainRewrite: "http://localhost:3000"
    }));
};

  Vue

  vue配置本地代理,在项目根目录创建vue.config.js

module.exports = {
    devServer: {
        open: true,

        https: false,

        hotOnly: false,
        proxy: { //设置代理
            /api: {
                target: http://192.168.000.129,
                host: 192.168.000.129,
                changeOrigin: true,
                pathRewrith: {
                    ^/api: /
                }
            },
             /lyg:{
                 target:http://192.168.000.108:8090/,
                 host:192.168.000.108,
                 changeOrigin:true,
                 pathRewrith:{
                     ^/lyg:‘/‘
                 }
             }
        },
        port:8000,
    },
}

  以上是vue,react配置本地代理的些许方法。如有疏漏,欢迎探讨

react和vue配置本地代理

标签:配置   探讨   ora   ack   image   简单   管理   react   目录   

原文地址:https://www.cnblogs.com/gitByLegend/p/11399945.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!