react 前端开发中使用npm start修改访问不同后端地址

前端开发中使用npm start修改访问不同后端地址

在这里插入图片描述
一般使用npm start后前端访问的是proxy的后台地址
每次修改访问后台地址后,都需要手动修改proxy,但是可以通过修改react-scripts源码实现动态,具体如下:
在这里插入图片描述
1.// 在打包运行处修改process.env.npm_package_proxy 和访问端口,以便修改源码时调用

let json = {};
let args = null;

function toJson(str) {
    return eval("(" + toArray(str) + ")");
}

//替换掉字符串中头尾的空格
function Trim(str) {
    return str.replace(/(^\s*)|(\s*$)/g, "");
}

//返回拼好json格式的字符串
function toArray(str) {
    var list = str.split(",");
    var myStr = "{";
    for (var i = 0; i < list.length; i++) {
        try {
            var keys = list[i].split("=");
            var key = Trim(keys[0]);
            var value = Trim(keys[1]);
            if (i > 0) {
                myStr += ",";
            }
            myStr += "\"" + key + "\":\"" + value + "\"";
        } catch (e) {
            continue;
        }
    }
    myStr += "}";
    return myStr;
}
//在config-overrides调用
function resolve() {
    args = process.argv;
    if (args.length !== 0) {
        args.forEach((item, idx) => {
            json = toJson(item)
            if (json.proxy) {
                process.env.npm_package_proxy = json.proxy;
            }
            if (json.port) {
                process.env.PORT = json.port;
            }
        });
    } else {
        process.env.REACT_APP_webSocket_URL = "localhost:3565";
    }
}

2.接下来在node-modules中找到

在这里插入图片描述
在第一步修改 process.env.PORT的作用就是为了不使用默认的3000
在这里插入图片描述
process.env.npm_package_proxy 在这就就派上用场了
const proxySetting =process.env.npm_package_proxy?process.env.npm_package_proxy: require(paths.appPackageJson).proxy;
在这里插入图片描述
最后就可以直接使用
在这里插入图片描述
效果如下,访问后台的地址自己配
在这里插入图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值