vue启动配置npm run serve,动态环境变量,根据不同环境访问不同域名

news/2024/11/19 22:39:58/

首先创建不同环境的配置文件,比如域名和一些常量,创建一个env文件,先看看文件目录
在这里插入图片描述
env.dev就是dev环境的域名,.test就是test环境域名,其他同理,然后配置package.json文件

{"name": "require-admin","version": "0.0.0","private": true,"scripts": {"dev": "vite --mode dev","test": "vite build --mode test","prod": "vite build --mode prod","preview": "vite preview"},"dependencies": {"@jridgewell/sourcemap-codec": "^1.4.14","axios": "^1.3.4","element-plus": "^2.3.1","html2canvas": "^1.4.1","pinia": "^2.0.32","vue": "^3.2.47","vue-router": "^4.1.6","vue3-video-play": "^1.3.1-beta.6","vuex": "^4.1.0"},"devDependencies": {"@vitejs/plugin-vue": "^4.0.0","@vitejs/plugin-vue-jsx": "^3.0.0","sass": "^1.60.0","sass-loader": "^13.2.2","vite": "^4.1.4"}
}

scripts里面就是我们的运行配置,当我们执行npm run dev的时候就会读取env.dev文件里面的配置,其他同理,需要运行test环境就用test,最后是我们的接口请求配置文件,
request.js,import.meta.env.VITE_APP_BASE_UR这个就是引用env文件里面的域名了

import axios from "axios";
import {ElMessage
} from 'element-plus'import router from "@/router";
// 创建实例
const instance = axios.create({baseURL: import.meta.env.VITE_APP_BASE_URL,    // 请求地址// baseURL: import.meta.env.VITE_APP_BASE_URL,    // 请求地址timeout: 10000, // 超时
});
// 拦截器
// 添加请求拦截器
instance.interceptors.request.use(function (config) {// config.url = instance.baseURL + config.url// 在发送请求之前做些什么// if (localStorage.getItem("token")) {//     config.headers['Authorization'] = "Bearer " + localStorage.getItem("token"); // 携带token// }// if(getUsername()) {//     config.headers['Username'] = getUsername();  // 携带用户名// }return config;
}, function (error) {// 对请求错误做些什么console.log("请求错误", error);return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(function (response) {// 对响应数据做点什么if (response.data.code === 0) {return Promise.resolve(response.data.data);} else {if (response.data.length && response.data.length > 20) {return Promise.resolve(response.data);} else {ElMessage({message: response.data.message,type: "error"})return Promise.reject(data);}}
}, function (error) {console.log("请求失败:", error);const errorData = error.response.data;if (error.response.status == 401) {router.push("/login");// ElMessage({// 	message: error.response.data.message,// 	type: "error"// })} else if (errorData.message) {ElMessage({message: errorData.message,type: "error"})} else if (error.response.status == 500) {console.log(500);ElMessage({message: "系统异常",type: "error"})} else if (res.statusCode == 502 || res.statusCode == 503 || res.statusCode == 504) {ElMessage({message: "系统维护中",type: "error"})} else {ElMessage({message: "未知错误",type: error})}// 对响应错误做点什么return Promise.reject(errorData);
});
// 暴露instance
export default instance;

http://www.ppmy.cn/news/1039180.html

相关文章

炸裂全场!百度如流超级助理、Comate X两大黑科技全面开挂,工作生产力狂飙

2023年的WAVE SUMMIT深度学习开发者大会来得比往年稍晚了些,却有着不同寻常的意义。 过去半年多时间里,大模型可以说是驻留在浪尖的一个名词。几乎所有行业都在讨论大模型的话题,涌现了哪些超出预期的能力,将对产业产生什么样的影…

生成主机文件

生成主机文件 将一个初始模板文件从 http://rhgls.area12.example.com/materials/hosts.j2 下载到 /home/curtis/ansible 完成该模板,以便用它生成以下文件:针对每个清单主机包含一行内容,其格式与 /etc/hosts 相同 创建名为 /home/curtis/an…

UglifyJS 和JShaman相比有什么不同?都可以进行js混淆加密吗?

UglifyJS 和JShaman相比有什么不同? UglifyJS主要功能是压缩JS代码,减小代码体积;JShaman是专门用于对JS代码混淆加密,目的是让JS代码变的不可读、混淆功能逻辑、加密代码中的隐秘数据或字符,是用于代码保护的。 因此…

uniapp封装接口

uniapp封装接口 在本篇技术博文中,我们将深入探讨 Uniapp 框架中如何封装接口,以简化开发流程并提高效率。接口封装是一种重要的开发策略,它不仅可以减少代码量,还能提高代码的复用性和维护性。 通过阅读本文,你将深…

解决方案:如何在 Amazon EMR Serverless 上执行纯 SQL 文件?

长久已来,SQL以其简单易用、开发效率高等优势一直是ETL的首选编程语言,在构建数据仓库和数据湖的过程中发挥着不可替代的作用。Hive和Spark SQL也正是立足于这一点,才在今天的大数据生态中牢牢占据着主力位置。在常规的Spark环境中&#xff0…

【JAVA】数组练习

⭐ 作者:小胡_不糊涂 🌱 作者主页:小胡_不糊涂的个人主页 📀 收录专栏:浅谈Java 💖 持续更文,关注博主少走弯路,谢谢大家支持 💖 数组练习 1. 数组转字符串2. 数组拷贝3.…

MySQL高可用MHA

目录 前言 一、概述 二、配置免密、组从复制 三、MHA配置 四、测试 总结 前言 MySQL高可用管理工具(MHA,Master High Availability)是一个用于自动管理MySQL主从复制的工具,它可以提供高可用性和自动故障转移。MHA由原版的MHA工具…

Linux多线程【初识线程】

✨个人主页: 北 海 🎉所属专栏: Linux学习之旅 🎃操作环境: CentOS 7.6 阿里云远程服务器 文章目录 🌇前言🏙️正文1、什么是线程?1.1、基本概念1.2、线程理解1.3、进程与线程的关系…