vite前端项目根据不同环境切换不同的请求域名,5分钟搞定

news2024/11/29 12:53:09

有能力的可以直接看vite官方文档:环境变量和模式 | Vite 官方中文文档

简单操作步骤:创建不同环境的配置文件,在配置文件中声明VITE_开头的变量并赋值,然后在项目中引入这个变量并使用。

创建配置文件

一般分为开发模式和生产模式两种,可以创建两种不同的环境配置文件。

.env.development 文件:开发环境

// 开发环境
 
ENV = 'development'
 
VITE_BASE_URL='https://xxx'

.env.production 文件:生产环境

​
// 生产环境
 
ENV = 'production'
 
VITE_BASE_URL='https://xxx'
 
​

默认情况下,开发服务器 (dev 命令) 运行在 development (开发) 模式,而 build 命令则运行在 production (生产) 模式。

这意味着当执行 vite build 时,它会自动加载 .env.production 中可能存在的环境变量。

引入配置变量

在axios请求里面配置使用环境变量里面的url:

const baseURL = import.meta.env.VITE_BASE_URL

const request = axios.create({
    baseURL: baseURL,
    withCredentials: false,
    timeout: 20000,
})

测试使用

如果配置好了之后,可以测试请求的路径是否发生了变化,或者在html中显示一下这个变量是否发生变化:在html中使用:

如果你要想在vite配置文件中使用,就看一下官网的配置文档吧:配置 Vite | Vite 官方中文文档 

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

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

相关文章

PyTorch 进阶指南,10个必须知道的原则

PyTorch 是一种流行的深度学习框架,它提供了强大的工具和灵活的接口,使得开发者能够搭建和训练各种神经网络模型。这份指南旨在为开发者提供一些有用的原则,以帮助他们在PyTorch中编写高效、可维护和可扩展的代码。 如果你对 Pytorch 还处于…

【ES】es介绍

倒排索引(Inverted Index)和正排索引(Forward Index) 正排索引是一种以文档为单位的索引结构,它将文档中的每个单词或词组与其所在的文档进行映射关系的建立。正排索引通常用于快速检索指定文档的内容,可以…

华为鸿蒙(HarmonyOS)介绍

华为鸿蒙(HarmonyOS)介绍 华为鸿蒙(HarmonyOS)是一款由华为自主研发的操作系统,旨在为各种智能设备提供一种统一、高效、安全的解决方案。鸿蒙系统基于微内核架构,可以应用于多种类型的设备,鸿…

32阵元 MVDR和DREC DOA估计波束方向图对比

32阵元 MVDR和DREC DOA估计波束方向图对比 一、原理 MVDR原理:https://zhuanlan.zhihu.com/p/457528114 DREC原理(无失真响应特征干扰相消器):http://radarst.ijournal.cn/html/2019/3/201903018.html 主要参数: 阵…

高效Java开发分析:JProfiler 14 for Mac中文

JProfiler允许你对运行中的Java应用程序进行实时性能分析。它提供了丰富的统计数据、图表和概览,帮助你了解应用程序的CPU使用情况、内存使用情况、线程活动等。你可以追踪和识别性能瓶颈,并快速定位问题所在。 内存分析:软件提供了强大的内…

中职网络安全Server2002——Web隐藏信息获取

B-2:Web隐藏信息获取 任务环境说明: 服务器场景名:Server2002(关闭链接)服务器场景用户名:未知 有问题需要环境加q 通过本地PC中渗透测试平台Kali使用Nmap扫描目标靶机HTTP服务子目录,将扫描子…

js_常用事件演示

✨前言✨ 1.如果代码对您有帮助 欢迎点赞👍收藏⭐哟 后面如有问题可以私信评论哟🗒️ 2.博主后面将持续更新哟😘🎉文章目录 🍔一、在JavaScript中什么是事件?🍟二、为什么要使用事件&#x…

如何在数字世界复刻一个高还原、高拟真的“你”?

本文为「云端智能剪辑」实践指南第五期,通过阿里云智能媒体服务IMS完成数字人形象训练、人声克隆定制,并使用Timeline实现视频合成及创作,打造一个“声形俱佳”的数字分身。 橙鲤|作者 形象日益逼真、交互更为顺畅,虚…

Python搭建代理IP池实现存储IP的方法

目录 前言 1. 介绍 2. IP存储方法 2.1 存储到数据库 2.2 存储到文件 2.3 存储到内存 3. 完整代码示例 总结 前言 代理IP池是一种常用的网络爬虫技术,可以用于反爬虫、批量访问目标网站等场景。本文介绍了使用Python搭建代理IP池,并实现IP存储的…

软件开发模式

瀑布式开发 在瀑布式开发中,开发严格遵循预先计划的需求分析、设计、编码、集成、测试、维护的步骤进行,步骤的成果作为衡量进度的方法,例如需求规格、设计文档、测试计划和代码审阅等, 瀑布式开发最早强调系统开发应有完整的周期…

文档智能翻译,保留文档原有布局,版式还原

翻译能力: 使用讯飞的AI翻译能力:机器翻译 niutrans - 语音扩展 - 讯飞开放平台API: 机器翻译niutrans API 文档 | 讯飞开放平台文档中心 执行效果: 原文档: 翻译还原的文档: 源码如下: impor…

AOT编程

1. AOT与JIT AOT:Ahead-of-Time(提前编译):程序执行前,全部被编译成机器码 JIT:Just in Time(即时编译): 程序边编译,边运行; 编译: 源代码&a…

oled显示汉字字体 形状 使用

oled模块的工作原理 oled的上方四个接口是IIC总线 通过IIC总线可以进行数据的传输 在OLED模块背后有一个芯片叫做SSD1306 这个芯片内部有1024个字节的RAM 对应到右边的小屏幕上就有1024个字节 一个字节八个bit位 每一个bit位就对应着一个小点 我们只需要往oled的RAM上写入数据就…

TPRI-DMP平台介绍

TPRI-DMP平台介绍 TPRI-DMP平台概述 TPRI-DMP为华能集团西安热工院自主产权的工业云PaaS平台,已经过13年的发展和迭代,其具备大规模能源电力行业生产应用软件开发和运行能力。提供TPRI-DMP平台主数据管理、业务系统开发与运行、应用资源管理与运维监控…

新能源光伏行业CRM:推动绿色能源发展与高效客户管理的双重突破

随着“碳中和”计划以及传统能源价格的不断飙升,我国新能源光伏产业在国家“双碳”战略目标和市场需求的双重驱动下高歌猛进,中国光伏产业新增装机量、累计装机量连续多年位居全球首位。CRM在光伏产业中的作用也日益突出。下面为您介绍新能源光伏行业的C…

UDP单播

CMakeLists.txt文件中添加如下行&#xff1a; link_libraries(ws2_32) 1.发送端 #include <iostream> #include <winsock2.h> #include <cstdio>#pragma comment(lib, "Ws2_32.lib") // Link with ws2_32.libint main() {1.Initialize winsock…

Redis中RDB和AOF

Redis中RDB和AOF 定时间间隔执行数据集的时间快照&#xff0c;把某一时刻数据和妆容以文件的形式写到磁盘上&#xff0c;也就是快照。 配置文件 如果是普通安装方式可以跳过&#xff0c;如果是docker安装&#xff0c;需要到官网下载redis.conf配置文件到本地&#xff0c;地址…

配置IPv6静态路由示例

1、静态路由简介 静态路由是一种需要管理员手工配置的特殊路由。 静态路由在不同网络环境中有不同的目的&#xff1a; 当网络结构比较简单时&#xff0c;只需配置静态路由就可以使网络正常工作。 在复杂网络环境中&#xff0c;配置静态路由可以改进网络的性能&#xff0c;并…

嵌入式开发——ADC模拟信号和数字信号

模拟信号和数字信号 模拟信号 自然界中大多数物理量是连续变化的,比如温度、声音、压力等灯,它们在一定时间内,可以有无限多个不同的取值,这些信号就是模拟信号。模拟信号就是指用连续变化的物理量所表示的信号。 自然界中的物理量都需要通过传感器将其转换成电信号后,才能进…

锐捷路由小型综合实验

一、实验拓扑 二、实验目的 1、熟练掌握ospf的配置 2、熟练掌握RIP的配置 3、熟练掌握静态路由的配置 4、熟练掌握各种路由协议之间的引入 5、熟练掌握telnet和ssh的配置 三、实验配置 R1 //配置telent username admin password admin123 enable password admin123 enable…