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

news2024/11/22 21:51:28

首先创建不同环境的配置文件,比如域名和一些常量,创建一个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.coloradmin.cn/o/890954.html

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

相关文章

桥梁结构健康监测系统,智能预警降低桥梁安全隐患

桥梁通常位于现代综合交通网络中的咽喉部位,对区域经济发展起着重要的推进作用,然而在为社会经济发展做出巨大贡献的同时,它们不可避免地会在荷载作用、环境侵蚀和自然灾害等影响下出现材料腐蚀劣化、结构损伤开裂、性能退化和功能失效等损伤…

销售团队的CRM:不同的销售角色如何使用CRM

客户关系管理(CRM)是各行各业运营中不可或缺的一部分。确定员工在客户关系管理中的角色是实施过程中的关键要素。 CRM系统为所有与销售相关的工作提供了一个集中平台,使团队能够对数据进行分类,并对活动进行优先排序。CRM 系统的…

CSDN编程题-每日一练(2023-08-17)

CSDN编程题-每日一练(2023-08-17) 一、题目名称:计算公式二、题目名称:计算逆波兰表达式的结果三、题目名称:争抢糖豆 一、题目名称:计算公式 时间限制:1000ms内存限制:256M 题目描述…

【MySQL--->表的约束】

文章目录 [TOC](文章目录) 一、表的约束概念二、空属性约束三、default约束四、zerofill约束五、主键约束六、auto_increment(自增长)约束七、唯一键约束八、外键约束 一、表的约束概念 表通过约束可以保证插入数据的合法性,本质是通过技术手段,保证插入数据收约束,保证数据的…

项目热部署

本文记录一下热部署步骤。。。。 热部署是提供高开发效率的一个非常有用的工具。指的是在应用程序运行修改代码或资源文件,并将这些变更应用到正在运行的程序上,而无需重新启动应用,无需等待整个项目的重新构建和部署。 使用热部署需要引入依…

leetcode做题笔记85最大矩形

给定一个仅包含 0 和 1 、大小为 rows x cols 的二维二进制矩阵,找出只包含 1 的最大矩形,并返回其面积。 示例 1: 思路一:单调栈 int maximalRectangle(char** matrix, int matrixSize, int* matrixColSize){int dp[matrixSize…

全面揭秘:抖音集团 QUIC 千万 QPS 应用实践

近日,ArchSummit全球架构师峰会深圳站成功举办。随着移动互联网的蓬勃发展,人们对网络速度和实时性的需求日益增加。在面对越来越多的图片、视频和音频等大资源时,页面加载缓慢、视频卡顿等问题频发,传统的传输控制协议&#xff0…

【UE4 RTS】12-HUD functionality Part2

前言 本篇实现了通过按钮控件暂停、加快、减慢游戏速度的功能。 效果 步骤 1. 打开控件蓝图“GameTime_HUD”,在设计器中对进度条控件的百分比创建一个绑定函数 绑定函数命名为“Get_ProgressBar_GameSpeed_SetSpeedDisplay”,并设置该函数类别属于Ga…

【蛋白-蛋白】Rosetta InterfaceAnalyzer 学习笔记

Rosetta InterfaceAnalyzer是一种用于分析蛋白质相互作用界面的工具,可以计算结合能、埋藏界面表面积、包装统计数据和其他有用的界面指标。 这里以(PDB:3R2X)为例,介绍如何利用Rosetta中InterfaceAnalyzer来快速分析蛋白-蛋白相互作用,并提…

excel统计函数篇1之average系列

一、excel中的统计函数 1、AVERAGE(number1,number2,...):返回其参数的平均值 2、AAVERAGEA(value1,value2,...):返回其参数的平均值,包括数字、文本和逻辑值 可以在括号内手动输入,也可以引用单元格,对序列求平均的…

浏览器307,自动从http跳转到https

现象: 解决方式 谷歌浏览器和edge: 进入chrome://net-internals/#hsts

Docker+Selenium Grid搭建自动化测试平台

安装docker yum install -y yum-utils device-mapper-persistent-data lvm2 yum-config-manager –add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo yum install docker-ce -y Create a Docker Network docker network create grid 下载镜像 hu…

TensorFlow2.1 模型训练使用

文章目录 1、环境安装搭建2、神经网络2.1、解决线性问题2.2、FAshion MNIST数据集使用 3、卷积神经网络3.1、卷积神经网络使用3.2、ImageDataGenerator使用3.3、猫狗识别案例3.4、参数优化 1、环境安装搭建 链接: Windows 安装Tensorflow2.1、Pycharm开发环境 2、神经网络 1…

第十四届中国大学生服务外包大赛细品,上百支队伍与合合信息用AI共克“记账”难题

前言 熟悉我的小伙伴应该知道我在大学时期参与了很多竞赛,我向来对比赛是比较热枕的,以我个人观点,我认为可以通过竞赛激发学习激情和检验自己的技能水平掌握情况,大学生很少有机会能够了解到课堂之外市场的需求,外包…

repmgr出现双主,并且时间线分叉,删除了最新的时间线节点

遇到的问题如下: 2023-08-17 20:24:21.566 CST [1556001] LOG: database system was interrupted; last known up at 2023-08-17 20:21:41 CST 2023-08-17 20:24:21.770 CST [1556001] LOG: restored log file "00000009.history" from archive cp: 无法…

【从零开始学爬虫】采集中国国际招标网招标数据

l 采集网站 【场景描述】采集中国国际招标网招标数据。 【源网站介绍】中国国际招标网致力于为企业提供招标、采购、拟在建项目信息及网上招标采购等一系列商务服务。 【使用工具】前嗅ForeSpider数据采集系统 http://www.forenose.com/view/forespider/view/download.html 【…

LVS-DR模式下(RS检测)ldirectord工具实现部分节点掉点后将请求发往正常设备进行处理

基于前文的LVS-DR集群构建环境 一.下载ldirectord软件 二.将模板文件中的LVS-DR模式相关文件拷贝到/etc/ha.d主配置目录并按实际设备修改 三.配置两台RS匹配规则 四.停止RS1的http服务进行测试 RS1失去工作能力,RS2接替RS1 基于前文的LVS-DR集群构建环境 一.下…

ARM--day5(C语言点灯实验、总线、串口通信信息、串口通讯协议)

函数分装实现点灯 gpio.c: #include "gpio.h" //函数功能:GPIO引脚初始化操作 //参数1:GPIO组号 //参数2:引脚编号 //参数3:初始化内容 void hal_gpio_init(volatile gpio_t*gpiox,unsigned int pin,gpio_init_t* ini…

浏览器控制台调试代码和JavaScript控制台方法介绍

浏览器控制台调试代码和JavaScript控制台方法介绍 浏览器控制台调试代码 浏览器控制台(Console)是浏览器提供的一个开发工具,用于在浏览器中执行和调试 JavaScript 代码。它提供了一个交互式环境,可以输入 JavaScript 代码&#…

计算机竞赛 wifi指纹室内定位系统

简介 今天来介绍一下室内定位相关的原理以及实现方法; WIFI全称WirelessFidelity,在中文里又称作“行动热点”,是Wi-Fi联盟制造商的商标做为产品的品牌认证,是一个创建于IEEE 802.11标准的无线局域网技术。基于两套系统的密切相关&#xff…