简单vue3前端打包部署到服务器，动态配置http请求头后端ip方法教程

vue3若依框架前端打包部署到服务器，需要部署到多个服务器上，每次打包会很麻烦，今天教大家一个动态配置请求头api的方法，部署后能动态获取(修改)对应服务器的请求ip

介绍两种方法，如有需要可以直接尝试步骤一，不行再用步骤二

方法一 、

只需要在request中获取地址栏的信息，不用新建文件

获取地址栏的http请求头

var baseUrlDt =window.location.protocol + "//" + window.location.hostname + ":8010";
let downloadLoadingInstance; // 动态ip打包时使用这条代码

request.js全部代码：

import axios from "axios";
import {ElNotification,ElMessageBox,ElMessage,ElLoading,
} from "element-plus";
import { getToken } from "@/utils/auth";
import errorCode from "@/utils/errorCode";
import { tansParams, blobValidate } from "@/utils/ruoyi";
import cache from "@/plugins/cache";
import { saveAs } from "file-saver";
import useUserStore from "@/store/modules/user";var baseUrlDt =window.location.protocol + "//" + window.location.hostname + ":8010";
let downloadLoadingInstance; // 动态ip打包时使用这条代码// 是否显示重新登录
export let isRelogin = { show: false };axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
// 创建axios实例
const service = axios.create({// axios中请求配置有baseURL选项，表示请求URL公共部分// baseURL: import.meta.env.VITE_APP_BASE_API,baseURL: baseUrlDt, // 动态ip打包时使用这条代码// 超时timeout: 10000,
});// request拦截器
service.interceptors.request.use((config) => {// 是否需要设置 tokenconst isToken = (config.headers || {}).isToken === false;// 是否需要防止数据重复提交const isRepeatSubmit = (config.headers || {}).repeatSubmit === false;if (getToken() && !isToken) {config.headers["Authorization"] = "Bearer " + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改}// get请求映射params参数if (config.method === "get" && config.params) {let url = config.url + "?" + tansParams(config.params);url = url.slice(0, -1);config.params = {};config.url = url;}if (!isRepeatSubmit &&(config.method === "post" || config.method === "put")) {const requestObj = {url: config.url,data:typeof config.data === "object"? JSON.stringify(config.data): config.data,time: new Date().getTime(),};const requestSize = Object.keys(JSON.stringify(requestObj)).length; // 请求数据大小const limitSize = 5 * 1024 * 1024; // 限制存放数据5Mif (requestSize >= limitSize) {console.warn(`[${config.url}]: ` +"请求数据大小超出允许的5M限制，无法进行防重复提交验证。");return config;}const sessionObj = cache.session.getJSON("sessionObj");if (sessionObj === undefined ||sessionObj === null ||sessionObj === "") {cache.session.setJSON("sessionObj", requestObj);} else {const s_url = sessionObj.url; // 请求地址const s_data = sessionObj.data; // 请求数据const s_time = sessionObj.time; // 请求时间const interval = 1000; // 间隔时间(ms)，小于此时间视为重复提交if (s_data === requestObj.data &&requestObj.time - s_time < interval &&s_url === requestObj.url) {const message = "数据正在处理，请勿重复提交";console.warn(`[${s_url}]: ` + message);return Promise.reject(new Error(message));} else {cache.session.setJSON("sessionObj", requestObj);}}}return config;},(error) => {console.log(error);Promise.reject(error);}
);// 响应拦截器
service.interceptors.response.use((res) => {// 未设置状态码则默认成功状态const code = res.data.code || 200;// 获取错误信息const msg = errorCode[code] || res.data.msg || errorCode["default"];// 二进制数据则直接返回if (res.request.responseType === "blob" ||res.request.responseType === "arraybuffer") {return res.data;}if (code === 401) {if (!isRelogin.show) {isRelogin.show = true;ElMessageBox.confirm("登录状态已过期，您可以继续留在该页面，或者重新登录","系统提示",{confirmButtonText: "重新登录",cancelButtonText: "取消",type: "warning",}).then(() => {isRelogin.show = false;useUserStore().logOut().then(() => {location.href = "/index";});}).catch(() => {isRelogin.show = false;});}return Promise.reject("无效的会话，或者会话已过期，请重新登录。");} else if (code === 500) {ElMessage({ message: msg, type: "error" });return Promise.reject(new Error(msg));} else if (code === 601) {ElMessage({ message: msg, type: "warning" });return Promise.reject(new Error(msg));} else if (code !== 200) {ElNotification.error({ title: msg });return Promise.reject("error");} else {return Promise.resolve(res.data);}},(error) => {console.log("err" + error);let { message } = error;if (message == "Network Error") {message = "后端接口连接异常";} else if (message.includes("timeout")) {message = "系统接口请求超时";} else if (message.includes("Request failed with status code")) {message = "系统接口" + message.substr(message.length - 3) + "异常";}ElMessage({ message: message, type: "error", duration: 5 * 1000 });return Promise.reject(error);}
);// 通用下载方法
export function download(url, params, filename, config) {downloadLoadingInstance = ElLoading.service({text: "正在下载数据，请稍候",background: "rgba(0, 0, 0, 0.7)",});return service.post(url, params, {transformRequest: [(params) => {return tansParams(params);},],headers: { "Content-Type": "application/x-www-form-urlencoded" },responseType: "blob",...config,}).then(async (data) => {const isBlob = blobValidate(data);if (isBlob) {const blob = new Blob([data]);saveAs(blob, filename);} else {const resText = await data.text();const rspObj = JSON.parse(resText);const errMsg =errorCode[rspObj.code] || rspObj.msg || errorCode["default"];ElMessage.error(errMsg);}downloadLoadingInstance.close();}).catch((r) => {console.error(r);ElMessage.error("下载文件出现错误，请联系管理员！");downloadLoadingInstance.close();});
}export default service;

方法二、

原理：打包的时候将动态的ip排除在打包外,不参与打包,类似于public文件夹下的index.html

步骤一、

在public文件夹下新建config.js文件，有的项目是static文件夹下

var ipConfig = {AXIOS_TIMEOUT: 10000,baseUrl: "http://xxx",//配置服务器IP及端口}

步骤二、

在根目录的index.html引入新增config.js，在项目中就可以使用了 

    <!-- 动态ip打包时使用这条代码 --><script type="text/javascript" src="/public/config.js"></script>

步骤三、

找到request.js文件，在拦截器中直接调用对象

const baseURL = window.ipConfig.baseUrl; // 动态ip打包时使用这条代码

request.js全部代码：

import axios from "axios";
import {ElNotification,ElMessageBox,ElMessage,ElLoading,
} from "element-plus";
import { getToken } from "@/utils/auth";
import errorCode from "@/utils/errorCode";
import { tansParams, blobValidate } from "@/utils/ruoyi";
import cache from "@/plugins/cache";
import { saveAs } from "file-saver";
import useUserStore from "@/store/modules/user";// axios.defaults.baseURL = window.ipConfig.BASE_URL//'http://192.168.1.177:8083/'
// // 开启认证
// axios.defaults.withCredentials = true
const baseURL = window.ipConfig.baseUrl; // 动态ip打包时使用这条代码
let downloadLoadingInstance;
// 是否显示重新登录
export let isRelogin = { show: false };axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
// 创建axios实例
const service = axios.create({// axios中请求配置有baseURL选项，表示请求URL公共部分// baseURL: import.meta.env.VITE_APP_BASE_API,baseURL: baseURL, // 动态ip打包时使用这条代码// 超时timeout: 10000,
});// request拦截器
service.interceptors.request.use((config) => {// 是否需要设置 tokenconst isToken = (config.headers || {}).isToken === false;// 是否需要防止数据重复提交const isRepeatSubmit = (config.headers || {}).repeatSubmit === false;if (getToken() && !isToken) {config.headers["Authorization"] = "Bearer " + getToken(); // 让每个请求携带自定义token 请根据实际情况自行修改}// get请求映射params参数if (config.method === "get" && config.params) {let url = config.url + "?" + tansParams(config.params);url = url.slice(0, -1);config.params = {};config.url = url;}if (!isRepeatSubmit &&(config.method === "post" || config.method === "put")) {const requestObj = {url: config.url,data:typeof config.data === "object"? JSON.stringify(config.data): config.data,time: new Date().getTime(),};const requestSize = Object.keys(JSON.stringify(requestObj)).length; // 请求数据大小const limitSize = 5 * 1024 * 1024; // 限制存放数据5Mif (requestSize >= limitSize) {console.warn(`[${config.url}]: ` +"请求数据大小超出允许的5M限制，无法进行防重复提交验证。");return config;}const sessionObj = cache.session.getJSON("sessionObj");if (sessionObj === undefined ||sessionObj === null ||sessionObj === "") {cache.session.setJSON("sessionObj", requestObj);} else {const s_url = sessionObj.url; // 请求地址const s_data = sessionObj.data; // 请求数据const s_time = sessionObj.time; // 请求时间const interval = 1000; // 间隔时间(ms)，小于此时间视为重复提交if (s_data === requestObj.data &&requestObj.time - s_time < interval &&s_url === requestObj.url) {const message = "数据正在处理，请勿重复提交";console.warn(`[${s_url}]: ` + message);return Promise.reject(new Error(message));} else {cache.session.setJSON("sessionObj", requestObj);}}}return config;},(error) => {console.log(error);Promise.reject(error);}
);// 响应拦截器
service.interceptors.response.use((res) => {// 未设置状态码则默认成功状态const code = res.data.code || 200;// 获取错误信息const msg = errorCode[code] || res.data.msg || errorCode["default"];// 二进制数据则直接返回if (res.request.responseType === "blob" ||res.request.responseType === "arraybuffer") {return res.data;}if (code === 401) {if (!isRelogin.show) {isRelogin.show = true;ElMessageBox.confirm("登录状态已过期，您可以继续留在该页面，或者重新登录","系统提示",{confirmButtonText: "重新登录",cancelButtonText: "取消",type: "warning",}).then(() => {isRelogin.show = false;useUserStore().logOut().then(() => {location.href = "/index";});}).catch(() => {isRelogin.show = false;});}return Promise.reject("无效的会话，或者会话已过期，请重新登录。");} else if (code === 500) {ElMessage({ message: msg, type: "error" });return Promise.reject(new Error(msg));} else if (code === 601) {ElMessage({ message: msg, type: "warning" });return Promise.reject(new Error(msg));} else if (code !== 200) {ElNotification.error({ title: msg });return Promise.reject("error");} else {return Promise.resolve(res.data);}},(error) => {console.log("err" + error);let { message } = error;if (message == "Network Error") {message = "后端接口连接异常";} else if (message.includes("timeout")) {message = "系统接口请求超时";} else if (message.includes("Request failed with status code")) {message = "系统接口" + message.substr(message.length - 3) + "异常";}ElMessage({ message: message, type: "error", duration: 5 * 1000 });return Promise.reject(error);}
);// 通用下载方法
export function download(url, params, filename, config) {downloadLoadingInstance = ElLoading.service({text: "正在下载数据，请稍候",background: "rgba(0, 0, 0, 0.7)",});return service.post(url, params, {transformRequest: [(params) => {return tansParams(params);},],headers: { "Content-Type": "application/x-www-form-urlencoded" },responseType: "blob",...config,}).then(async (data) => {const isBlob = blobValidate(data);if (isBlob) {const blob = new Blob([data]);saveAs(blob, filename);} else {const resText = await data.text();const rspObj = JSON.parse(resText);const errMsg =errorCode[rspObj.code] || rspObj.msg || errorCode["default"];ElMessage.error(errMsg);}downloadLoadingInstance.close();}).catch((r) => {console.error(r);ElMessage.error("下载文件出现错误，请联系管理员！");downloadLoadingInstance.close();});
}export default service;

如果对你有帮助，点个👍