vite 多环境变量配置

news2026/2/15 8:20:15

创建.env.production、.env.develoment、.env.test 文件

配置不同环境的环境变量

例如:

.env.production

NODE_ENV='production'
# API URL
VITE_APP_API_URL='/'

.env.develoment

NODE_ENV='development'
# API URL
VITE_APP_API_URL='/api'

修改package.json中scripts

在指令后加上相应的mode

"dev": "vite --mode develoment",
"test:unit": "vitest --mode test",
"build": "run-p type-check \"build-only {@}\" --  \n --mode production",

查看和使用环境变量

通过使用import.meta.env 获取当前所有的环境变量

console.log('环境变量:', import.meta.env);   // 打印环境变量

可以通过环境变量来控制axios的baseURL

const service = axios.create({
  baseURL: import.meta.env.VITE_APP_API_URL || '',
  withCredentials: true,
  timeout: 50000,
  headers: { "Content-Type": "application/json;charset=utf-8" },
});

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

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

相关文章

uniapp使用ucharts组件

1.ucharts准备 有两种使用方式:一种是在uni的插件市场下载(组件化开发)。一种是手动引入ucharts包。官方都封装好组件了,我们不用岂不是浪费。 直接去dcloud插件市场(DCloud 插件市场)找,第一…

mybatis-plus自动填充时间的配置类实现

mybatis-plus自动填充时间的配置类实现 在实际操作过程中,我们并不希望创建时间、修改时间这些来手动进行,而是希望通过自动化来完成,而mybatis-plus则也提供了自动填充功能来实现这一操作,接下来,就来了解一下mybatis…

一、Hadoop概述

文章目录 一、Hadoop是什么二、Hadoop发展历史三、Hadoop三大发行版本1. Apache Hadoop2. Cloudera Hadoop3. Hortonworks Hadoop 四、Hadoop优势1. 高可靠性2. 高扩展性3. 高效性4. 高容错性 五、Hadoop 组成1. Hadoop1.x、2.x、3.x区别2. HDFS 架构概述3. YARN 架构概述4. Ma…

深度学习笔记(9)——神经网络和反向传播

神经网络和反向传播 神经网络架构: 更多的神经元,更大的模型容量,使用更强的正则化进行约束。 神经网络的分层计算 f W 2 m a x ( 0 , W 1 x b 1 ) b 2 fW_2max(0,W_1xb_1)b_2 fW2​max(0,W1​xb1​)b2​,其中max函数体现了非线性,如果想要加深网络的层次,必须…

大模型辅助测试的正确打开方式?

测试的基本目的之一,是对被测对象进行质量评估。换言之,是要提供关于被测对象质量的“确定性”。因此,我们很忌讳在测试设计中引入“不确定性”,比如采用不可靠的测试工具、自动化测试代码逻辑复杂易错、测试选择假设过于主观等等…

ipad如何直连主机(Moonlight Sunshine)

Windows 被连接主机(Windows) 要使用的话需要固定ip,不然ip会换来换去,固定ip方法本人博客有记载Github下载Sunshine Sunshine下载地址除了安装路径需要改一下,其他一路点安装完成后会打开Sunshine的Web UI&#xff…

sentinel集成nacos启动报[check-update] get changed dataId error, code: 403错误排查及解决

整合nacos报403错误 因为平台写的一个限流代码逻辑有问题,所以准备使用sentinel来限流。平台依赖里面已经引入了,之前也测试过,把sentinel关于nacos的配置加上后,启动一直输出403错误 [fixed-10.0.20.188_8848-test] [check-upda…

紫光同创-盘古200pro+开发板

本原创文章由深圳市小眼睛科技有限公司创作,版权归本公司所有,如需转载,需授权并注明出处(www.meyesemi.com) 一、开发系统介绍 开发系统概述 MES2L676-200HP 开发板采用紫光同创 logos2 系列 FPGA,型号:…

Vue开发环境搭建上篇:安装NVM和NPM(cpnm、pnpm)

文章目录 引言I 安装NVM1.1 Windows系统安装NVM,实现Node.js多版本管理1.2 配置下载镜像1.3 NVM常用操作命令II NPM永久使用淘宝源安装 cnpm安装pnpm【推荐】see also: vscode常用插件引言 淘宝镜像:http://npm.taobao.org 和 http://registry.npm.taobao.org 已在 2022.06.3…

【AI大模型】探索GPT模型的奥秘:引领自然语言处理的新纪元

目录 🍔 GPT介绍 🍔 GPT的架构 🍔 GPT训练过程 3.1 无监督的预训练语言模型 3.2 有监督的下游任务fine-tunning 🍔 小结 学习目标 了解什么是GPT.掌握GPT的架构.掌握GPT的预训练任务. 🍔 GPT介绍 GPT是OpenAI公…

正则表达式(三剑客之sed)

1.sed工具的使用 1.1 sed工具 1)命令格式:sed -n ‘n’ p filename 1.2 打印某行 1)打印第二行 [rootlocalhost ~]# sed -n 2p /etc/passwd 2)第二行重复打印 [rootlocalhost ~]# sed 2p /etc/passwd 3)所有行全部…

细说STM32F407单片机IIC总线基础知识

目录 一、 I2C总线结构 1、I2C总线的特点 2、I2C总线通信协议 3、 STM32F407的I2C接口 二、 I2C的HAL驱动程序 1、 I2C接口的初始化 2、阻塞式数据传输 (1)函数HAL_I2C_IsDeviceReady() (2)主设备发送和接收数据 &#…

Android笔试面试题AI答之Android基础(7)

Android入门请看《Android应用开发项目式教程》,视频、源码、答疑,手把手教 文章目录 1.Android开发如何提高App的兼容性?**1. 支持多版本 Android 系统****2. 适配不同屏幕尺寸和分辨率****3. 处理不同硬件配置****4. 适配不同语言和地区**…

《机器学习》线性回归模型实现

目录 一、一元线性回归模型 1、数据 2、代码 3、结果 二、多元线性回归模型 1、数据 2、代码 3、结果 一、一元线性回归模型 1、数据 2、代码 # 导入所需的库 import pandas as pd # 用于数据处理和分析 from matplotlib import pyplot as plt # 用于数据可视化 fr…

基于DIODES AP43781+PI3USB31531+PI3DPX1207C的USB-C PD Video 之全功能显示器连接端口方案

随着USB-C连接器和PD功能的出现,新一代USB-C PD PC显示器可以用作个人和专业PC工作环境的电源和数据集线器。 虽然USB-C PD显示器是唯一插入墙壁插座的交流电源输入设备,但它可以作为数据UFP(上游接口)连接到连接到TCD&#xff0…

QWidget应用封装为qt插件,供其他qt应用调用

在之前的文章中,有介绍通过QProcess的方式启动QWidget应用,然后将其窗口嵌入到其他的qt应用中,作为子窗口使用.这篇文章主要介绍qt插件的方式将QWidget应用的窗口封装为插件,然后作为其他Qt应用中的子窗口使用. 插件优点: 与主程序为同一个进程,免去了进程间繁琐的通信方式,…

关于 覆铜与导线之间间距较小需要增加间距 的解决方法

若该文为原创文章,转载请注明原文出处 本文章博客地址:https://hpzwl.blog.csdn.net/article/details/144776995 长沙红胖子Qt(长沙创微智科)博文大全:开发技术集合(包含Qt实用技术、树莓派、三维、OpenCV…

ArcGIS教程(009):ArcGIS制作校园3D展示图

文章目录 数据下载校园3D展示图制作创建要素类矢量化【楼】要素矢量化【绿地】矢量化【范围】矢量化处理打开ArcScene添加动画数据下载 https://download.csdn.net/download/WwLK123/90189025校园3D展示图制作 创建要素类 添加底图: 新建【文件地理数据库】,并修改名称为【…

权限注解+AOP切面+额外工具(UUID生成id,JWT,Servlet客户端,字符串String工具类,Redis序列化,ip工具类)

权限功能和注解的关系 ①、定义三个注解 //角色认证,必须具有指定角色标识才能进入该方法 Retention(RetentionPolicy.RUNTIME) Target({ElementType.METHOD,ElementType.TYPE}) public interface RequiresRoles{//需要校验的角色标识String[] value() default {}…

RGB、HSV颜色模型及MATLAB互换应用实例

一、前言 RGB和HSV模型是数字图像处理中颜色空间中的两种重要表示方式,RGB和HSV都是描述颜色的数学模型,可以用于表示和处理图像中的颜色信息。 RGB模型是一种基于光的颜色模型,由红(Red)、绿(Green&#x…