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

news2024/12/14 18:52:36

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) => {
    // 是否需要设置 token
    const 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; // 限制存放数据5M
      if (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) => {
    // 是否需要设置 token
    const 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; // 限制存放数据5M
      if (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;

如果对你有帮助，点个👍

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2259491.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Java-DataX 插件机制示例

Java-DataX 插件机制示例

示例代码 DataXPluginExample: DataX 项目的plugin 机制学习https://gitee.com/wendgit/data-xplugin-example/ 摘要 DataXPluginExample 是一个我编写的专门解读DataX插件机制的示例项目&#xff0c;旨在深入解析和掌握DataX的插件机制。本示例通过简洁明了的实现方式&#…
阅读更多...
基于AI网关的风电系统在线监测

基于AI网关的风电系统在线监测

风力发电是典型的清洁能源之一&#xff0c;也是我国能源结构转型的重要组成。近年来我国大力发展风能、水能、光伏等清洁能源&#xff0c;加快创造人与生态友好和谐的人居社会。由于风电机组通常部署于偏远的野外&#xff0c;经常面临狂风、暴雨、日晒等严苛工作形势&#xff0…
阅读更多...
[Unity] Text文本首行缩进两个字符

[Unity] Text文本首行缩进两个字符

Text文本首行缩进两个字符的方法比较简单。通过代码把"\u3000\u3000"加到文本字符串前面即可。 比如&#xff1a; 效果&#xff1a; 代码&#xff1a; TMPtext1.text "\u3000\u3000" "选择动作类型&#xff1a;";
阅读更多...
实时日志与发展：Elasticsearch 推出全新专用的 logsdb 索引模式

实时日志与发展：Elasticsearch 推出全新专用的 logsdb 索引模式

作者&#xff1a;来自 Elastic Mark Settle, George Kobar 及 Amena Siddiqi Elastic 最新发布的 logsdb 索引模式是专为日志管理优化的功能&#xff0c;旨在提升日志数据的存储效率、查询性能以及整体可用性。这个模式专注于满足现代日志处理需求&#xff0c;提供更高效的日志…
阅读更多...
可视化报表如何制作？一文详解如何用报表工具开发可视化报表

可视化报表如何制作？一文详解如何用报表工具开发可视化报表

在如今这个数据驱动的商业时代&#xff0c;众多企业正如火如荼地推进数字化转型&#xff0c;力求在激烈的市场竞争中占据先机。然而&#xff0c;随着业务规模的扩大和运营复杂度的提升&#xff0c;企业的数据量爆炸式增长&#xff0c;传统报表格式单一、信息呈现密集且不易解读…
阅读更多...
在CentOS中安装和卸载mysql

在CentOS中安装和卸载mysql

在CentOS7中安装和卸载mysql 卸载mysql1、查看是否安装过mysql2、查看mysql服务状态3、关闭mysql服务4、卸载mysql相关的rpm程序5、删除mysql相关的文件6、删除mysql的配置文件my.cnf 安装mysql1、下载mysql相关的rpm程序2、检查/tmp临时目录权限3、安装mysql前的依赖检查3、安…
阅读更多...
【EthIf-03】 EthernetInterface软件栈的文件组织结构

【EthIf-03】 EthernetInterface软件栈的文件组织结构

上图为《AUTOSAR_SWS_EthernetInterface【v2.2.0 】》给出的EthernetInterface软件栈的文件组织结构，本文主要关注arccore代码中已存在的文件的功能和作用，不知道的小伙伴可以查看🔗EthIf的文件结构中的src和inc目录下的文件有哪些： 1. 文件结构 1.1 EthIf_Cbk.h 头文…
阅读更多...
Java基础知识(四) -- 面向对象(上)

Java基础知识(四) -- 面向对象(上)

1.概述 Java语言是一种面向对象的程序设计语言&#xff0c;而面向对象思想(OOP)是一种程序设计思想&#xff0c;在面向对象思想的指引下&#xff0c;使用Java语言去设计、开发计算机程序。这里的对象泛指现实中一切事物&#xff0c;每种事物都具备自己的属性和行为。 面向对象思…
阅读更多...
国内Chrome浏览器下载安装教程，谷歌浏览器最新下载教程

国内Chrome浏览器下载安装教程，谷歌浏览器最新下载教程

今天主要讲解的是国内Chrome浏览器下载安装教程&#xff0c;谷歌浏览器最新下载教程&#xff0c;包括确认浏览器版本、ChromeDriver 驱动的下载&#xff0c;同理&#xff0c;这个教程同样适用于windows版本的&#xff0c;linux 版本的&#xff0c; mac 版本的。 众所周知&…
阅读更多...
【KodExplorer】可道云KodExplorer-个人网盘安装使用

【KodExplorer】可道云KodExplorer-个人网盘安装使用

说明&#xff1a;安装kodExplorer &#xff08;不是Kodbox&#xff09;&#xff1b;Kodbox需求服务器至少2核4G内存&#xff0c;要求环境具备php/redis/mysql/。安装kodExplorer 就是比较方便简单部署&#xff0c;个人版免费。 一、安装环境需求 服务器: Windows&#xff0c;…
阅读更多...
nVisual 定制化APP打包流程

nVisual 定制化APP打包流程

一、下载打包软件 HBuilder X 下载地址&#xff1a;https://dcloud.io/hbuilderx.html 安装:此软件为绿色软件&#xff0c;解压即可使用。进入目录&#xff0c;双击exe启动。 此软件需要注册&#xff0c;打开时会提供跳转链接&#xff0c;通过邮箱注册账号。 注册成功后&#…
阅读更多...
pytest -s执行的路径

pytest -s执行的路径

pytest -s执行的路径&#xff1a; 直接写pytest -s&#xff0c;表示从当前路径下开始执行全部.py的文件。 执行具体指定文件&#xff1a;pytest -s .\testXdist\test_dandu.py 下面这样执行pytest -s 会报找不到文件或没权限访问&#xff0c; 必须要加上具体文件路径pytest -s…
阅读更多...
Bootstrap-HTML（六）Bootstrap按钮

Bootstrap-HTML（六）Bootstrap按钮

Bootstrap按钮与按钮组 前言一、Bootstrap按钮&#xff08;一&#xff09;、内置按钮样式&#xff08;二&#xff09;、按钮边框设置&#xff08;三&#xff09;、按钮尺寸调整&#xff08;四&#xff09;、块级按钮创建&#xff08;五&#xff09;、活动 / 禁用按钮设置 二、B…
阅读更多...
HTMLCSS：3D卡片翻转悬停效果

HTMLCSS：3D卡片翻转悬停效果

这段HTML、CSS代码定义了页面的背景、卡片的3D翻转效果、内容的布局和样式&#xff0c;以及伪元素的视觉效果。通过这些样式&#xff0c;可以实现一个在鼠标悬停时翻转显示另一面内容的3D卡片。 演示效果 HTML&CSS <!DOCTYPE html> <html lang"en">…
阅读更多...
Apache APISIX快速入门

Apache APISIX快速入门

本文将介绍Apache APISIX&#xff0c;这是一个开源API网关&#xff0c;可以处理速率限制选项&#xff0c;并且可以轻松地完全控制外部流量对内部后端API服务的访问。我们将看看是什么使它从其他网关服务中脱颖而出。我们还将详细讨论如何开始使用Apache APISIX网关。 在深入讨…
阅读更多...
对象键值对的修改

对象键值对的修改

一&#xff1a;一个对象&#xff0c;过滤掉键对应的值是空数组的键&#xff0c;保留值不是空数组的键值对 const obj {a: [1, 2, 3],b: [],c: [4, 5],d: [],e: [6] };// 过滤掉值为空数组的键值对 const filteredObj Object.fromEntries(Object.entries(obj).filter(([key, v…
阅读更多...
【专题】2024年中国新能源汽车用车研究报告汇总PDF洞察（附原数据表）

【专题】2024年中国新能源汽车用车研究报告汇总PDF洞察（附原数据表）

原文链接&#xff1a; https://tecdat.cn/?p38564 本年度&#xff0c;国家及地方政府持续发力&#xff0c;推出诸多政策组合拳&#xff0c;全力推动汽车产业向更高质量转型升级&#xff0c;积极鼓励消费升级&#xff0c;并大力推行以旧换新等惠民生、促发展举措。尤为引人注目…
阅读更多...
记:排查设备web时慢时快问题,速度提升100%

记:排查设备web时慢时快问题,速度提升100%

问题描述 问题1&#xff1a; 发现web登录界面刷新和登录功能都比较卡&#xff0c;开浏览器控制台看了下&#xff0c;让我很惊讶&#xff0c;居然能这么慢&#xff1a; 公司2个局域网内的表现不同&#xff0c;局域网A中的都比较卡&#xff0c;局域网B中的又不存在该现象。 问…
阅读更多...
5分钟掌握 Bootstrap：打造高效、优雅的前端页面

5分钟掌握 Bootstrap：打造高效、优雅的前端页面

在前端开发中&#xff0c;快速构建响应式、精美的页面是非常重要的任务&#xff0c;而 Bootstrap 是一个功能强大的 CSS 框架&#xff0c;可以帮助开发者轻松实现这一目标。本篇博客将通过代码示例和表格为你详细讲解如何快速上手 Bootstrap。 5分钟掌握 Bootstrap&#xff1a;…
阅读更多...
Launcher启动流程

Launcher启动流程

Launcher启动流程分2个阶段&#xff1a; AMS systemReady() 会启动一个临时Activity&#xff1a;com.android.settings.FallbackHome&#xff0c;如下流程等到用户解锁成功后&#xff0c;FallbackHome轮询到有可用的RealHome包&#xff0c;会销毁掉自己&#xff0c;AMS发现没有…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023