vue打包后仍可配置后端请求地址

前言:

        公司项目一个内网, 一个外网, 每次改完都得打两个包. 前端后端都要小心翼翼, 生怕打包部署环节出现问题. 于是乎, 就想了一个快速解决办法.

原理及注意事项:

        根目录public下的文件不会被打包, 但public文件夹好像和cli版本有关, 我的是2.9.6

        采用请求的放方式读取文件, 不会有缓存

代码部分:

public/config.json

{
    "BASE_URL_DEV": "http://*********",
    "BASE_URL_PROD": "http://*******/ai" //你的请求地址
}

 定义好文件后, 在request.js创建请求时引入

request.js 我只贴出需要的逻辑代码, 请参考你的项目

//你的代码

let baseURL;
var xmlhttp;
if (window.XMLHttpRequest) {
  //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
  xmlhttp = new XMLHttpRequest();
} else {
  // IE6, IE5 浏览器执行代码
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    baseURL = JSON.parse(xmlhttp.responseText);  //获取文件中定义的参数
  }
};
//'../../../config.json' 这个地址和你的页面有几层目录有关, 相当于你的菜单最大有几层就往上翻几层
//process.env.BASE_URL 指的就是打包的二级目录, 对应vue.config.js中的publicPath
xmlhttp.open("GET", `../../../${process.env.BASE_URL}/config.json`, false);
xmlhttp.send();

const service = axios.create({
  baseURL: process.env.NODE_ENV === "production" ? baseURL.BASE_URL_PROD : "/", //打包则使用config.json的配置
  timeout: Config.timeout // 请求超时时间
});

//你的代码

总结:

        我这种办法两步就可以解决, 算是比较省事的, 但使用了XMLHttpRequest. 如果大家有更好的办法, 或者此办法有不足之处, 可以直接留言给我.

2022.1.26追加:

动态路由可采用相同道理

routers.js

let baseRouter;
var xmlhttp;
if (window.XMLHttpRequest) {
  //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
  xmlhttp = new XMLHttpRequest();
} else {
  // IE6, IE5 浏览器执行代码
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    baseRouter = JSON.parse(xmlhttp.responseText).baseRouter;
  }
};
//'../../../config.json' 这个地址和你的页面有几层目录有关, 相当于你的菜单最大有几层就往上翻几层
xmlhttp.open("GET", "../../../config.json", false);
xmlhttp.send();

export default new Router({
  mode: "history",
  base: baseRouter,
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRouterMap
});