前端开发中使用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;
最后就可以直接使用
效果如下,访问后台的地址自己配