Vite 项目中环境变量的配置和使用
Vite 项目中环境变量的声明
我们要在 Vite 项目中进行环境变量的声明,那么需要在项目的根目录下,新建 .env.[mode] 文件用于声明环境变量,如:
- .env.test 文件用于测试环境下项目全局变量的声明
- .env.dev 文件用于开发环境下项目全局变量的声明
- .env.prod 文件用于生产环境下项目全局变量的声明
其中 mode 是在 vite 启动项目时使用的环境模式名称。
需要注意的是,我们在 .env.[mode] 文件中声明的环境变量需要以 VITE_ 开头
# 环境
VITE_ENV = 'dev'# 服务端 IP
VITE_SERVER_HOST = "127.0.0.1"
# 服务端服务程序端口号
VITE_SERVER_PORT = 8080# ...
启动运行项目并指定环境模式
我们在 package.json 中启动运行项目的脚本命令中,可以使用 --mode 参数指定我们要使用的环境模式,环境模式名称即 .env.[mode] 文件名中的 mode,如:
"scripts": {"dev": "vite --open --mode=dev","test": "vite --open --mode=test","build": "vue-tsc && vite build --mode=prod","preview": "vite preview --open"},
然后,我们执行相应的脚本命令就会会启用相应的环境变量文件。
在 js/ts 文件中使用环境变量
在 js/ts 文件中通过 import.meta.env.环境变量名 获取相应环境变量的值
const env: string = import.meta.env.VITE_ENV
console.log(`当前的环境为 ${env}`)

在 html 文件中使用环境变量
在 html 文件中通过 %环境变量名% 获取相应环境变量的值
在标签体中使用
<body><h1>当前的环境为 %VITE_ENV%</h1></body>

在标签属性中使用
<body><img src="asdasda" alt="当前的环境为 %VITE_ENV%"><div id="app"></div><script type="module" src="/src/main.ts"></script>
</body>

相关文章:
Vite 项目中环境变量的配置和使用
Vite 项目中环境变量的声明 我们要在 Vite 项目中进行环境变量的声明,那么需要在项目的根目录下,新建 .env.[mode] 文件用于声明环境变量,如: .env.test 文件用于测试环境下项目全局变量的声明.env.dev 文件用于开发环境下项目全…...
C++读取.bin二进制文件
C读取.bin二进制文件 在C中,可以使用文件输入/输出流来进行二进制文件的读写操作,方便数据的保存和读写。 //C读取bin二进制文件 int read_bin() {std::ifstream file("data_100.bin", std::ios::in | std::ios::binary);if (file) {// 按照…...
【ZZULIOJ】1038: 绝对值最大(Java)
目录 题目描述 输入 输出 样例输入 Copy 样例输出 Copy code 题目描述 输入3个整数,输出绝对值最大的那个数。 输入 输入包含3个int范围内的整数,用空格隔开。 输出 输出三个数中绝对值最大的数,单独占一行。若绝对值最大的数不唯…...
递归算法讲解2
前情提要 上一篇递归算法讲解在这里 递归算法讲解(结合内存图) 没看过的小伙伴可以进去瞅一眼,谢谢! 递归算法的重要性 递归算法是非常重要的,如果想要进大厂,以递归算法为基础的动态规划是必考的&…...
机器学习第33周周报Airformer
文章目录 week33 AirFormer摘要Abstract一、论文的前置知识1. 多头注意力机制(MSA)2. 具有潜变量的变分模型 二、文献阅读1. 题目2. abstract3. 问题与模型阐述3.1 问题定义3.2 模型概述3.3 跨空间MSA(DS-MSA)3.4 时间相关MSA&…...
设计模式(12):代理模式
一.核心作用 通过代理,控制对对象的访问;可以详细控制访问某个对象的方法,在调用这个方法前做前置处理,调用这个方法后做后置处理。 二.核心角色 抽象角色: 定义代理角色和真实角色的公共对外方法;真实角色: 实现抽…...
前端9种图片格式基础知识, 你应该知道的
彩色深度 彩色深度标准通常有以下几种: 8位色,每个像素所能显示的彩色数为2的8次方,即256种颜色。16位增强色,16位彩色,每个像素所能显示的彩色数为2的16次方,即65536种颜色。24位真彩色,每个…...
ChatGPT 与 OpenAI 的现代生成式 AI(上)
原文:Modern Generative AI with ChatGPT and OpenAI Models 译者:飞龙 协议:CC BY-NC-SA 4.0 序言 本书以介绍生成式 AI 领域开始,重点是使用机器学习算法创建新的独特数据或内容。它涵盖了生成式 AI 模型的基础知识,…...
全量知识系统 程序详细设计之架构设计:一个信息系统架构
统架构,整体设计分成了三部分--三种方面:信息nformation、系统Syste 原文 以下是对全知系统程序详细设计需要的架构规划的考虑。 全知系统架构是一个信息系统架构,整体设计分成了三部分(三种“方面”):信…...
从零开始:成功进入IT行业的方法与技巧
如今,信息技术(IT)行业成为了就业市场上的热门领域。由于其快速发展和广阔的职业机会,许多人希望能够进入这个行业。然而,对于没有任何相关背景知识的人来说,要成功进入IT行业可能会面临一些挑战。本文将分…...
SpringCloud - 如何本地调试不会注册到线上环境(Nacos)?
问题描述 有时候我们需要本地调试注册到 Nacos 上,但是会影响线上服务的 Feign 请求打到本地导致不通影响了线上业务。 原因分析 一般最传统的解决方案就是修改本地 bootstrap.yml 的 spring.cloud.nacos.discovery.namespace spring:application:name: app-serv…...
1.9 面试经典150题 除自身以外数组的乘积
除自身以外数组的乘积 给你一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法࿰…...
【美团笔试题汇总】2023-09-02-美团春秋招笔试题-三语言题解(CPP/Python/Java)
🍭 大家好这里是KK爱Coding ,一枚热爱算法的程序员 ✨ 本系列打算持续跟新美团近期的春秋招笔试题汇总~ 💻 ACM银牌🥈| 多次AK大厂笔试 | 编程一对一辅导 👏 感谢大家的订阅➕ 和 喜欢…...
小黑逆向爬虫探索与成长之路:小黑独立破解毛毛租数据加密与解密
前言 有道和招标网的加密入口定位在前面两期做了详细的介绍,本小结将通过简单的关键词搜索定位到加密与解密入口 数据接口寻找与请求 根据响应数据长度,确定数据接口,发现传入的参数需要加密,响应的结果需要解密,后…...
深入浅出 -- 系统架构之微服务架构常见的六种设计模式
面向服务的架构(SOA) 面向服务的架构(SOA)是一种设计方法,也是一个组件模型,它将应用程序的不同功能单元(称为服务)通过这些服务之间定义良好的接口和契约联系起来。接口是采用中立的…...
SSM框架学习——SqlSession以及Spring与MyBatis整合
SqlSession以及Spring与MyBatis整合 准备所需要的JAR包 要实现MyBatis与Spring的整合,很明显需要这两个框架的JAR包,但是只是使用这两个框架中所提供的JAR包是不够的,还需要配合其他包使用: Spring的JAR包MyBatis的JAR包Spring…...
6、【单例模式】确保了一个类在程序运行期间只有一个实例
你好,我是程序员雪球 在软件设计中,单例模式是一种常见的设计模式。它确保了一个类在程序运行期间只有一个实例,并提供了全局访问该实例的方式。单例模式在许多场景中都有广泛的应用,例如共享资源管理、数据库连接、日志记录器等…...
vuex插件实现数据共享
vuex插件 vuex是管理多个vue通用的数据的插件.(状态管理工具,状态是数据) 我们对于多个vue文件之间的共同数据,是用props传递,或者对于一个vue实例对象,进行绑定,传参,也是多次传参,多个文件之间,比较麻烦. 但是我们vuex会创建一个公共对象,从这个公共对象上赋值,比较简单易…...
【吊打面试官系列】Redis篇 - 使用过 Redis 分布式锁么,它是什么回事?
大家好,我是锋哥。今天分享关于 【使用过 Redis 分布式锁么,它是什么回事?】面试题,希望对大家有帮助; 使用过 Redis 分布式锁么,它是什么回事? 先拿 setnx 来争抢锁,抢到之后&#…...
2025年能源电力系统与流体力学国际会议 (EPSFD 2025)
2025年能源电力系统与流体力学国际会议(EPSFD 2025)将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会,EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...
多场景 OkHttpClient 管理器 - Android 网络通信解决方案
下面是一个完整的 Android 实现,展示如何创建和管理多个 OkHttpClient 实例,分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...
学校招生小程序源码介绍
基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码,专为学校招生场景量身打造,功能实用且操作便捷。 从技术架构来看,ThinkPHP提供稳定可靠的后台服务,FastAdmin加速开发流程,UniApp则保障小程序在多端有良好的兼…...
【2025年】解决Burpsuite抓不到https包的问题
环境:windows11 burpsuite:2025.5 在抓取https网站时,burpsuite抓取不到https数据包,只显示: 解决该问题只需如下三个步骤: 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...
什么是EULA和DPA
文章目录 EULA(End User License Agreement)DPA(Data Protection Agreement)一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA(End User License Agreement) 定义: EULA即…...
数据库分批入库
今天在工作中,遇到一个问题,就是分批查询的时候,由于批次过大导致出现了一些问题,一下是问题描述和解决方案: 示例: // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...
关键领域软件测试的突围之路:如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天,软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件,这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下,实现高效测试与快速迭代?这一命题正考验着…...
LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf
FTP 客服管理系统 实现kefu123登录,不允许匿名访问,kefu只能访问/data/kefu目录,不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...
零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程
STM32F1 本教程使用零知标准板(STM32F103RBT6)通过I2C驱动ICM20948九轴传感器,实现姿态解算,并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化,适合嵌入式及物联网开发者。在基础驱动上新增…...
一些实用的chrome扩展0x01
简介 浏览器扩展程序有助于自动化任务、查找隐藏的漏洞、隐藏自身痕迹。以下列出了一些必备扩展程序,无论是测试应用程序、搜寻漏洞还是收集情报,它们都能提升工作流程。 FoxyProxy 代理管理工具,此扩展简化了使用代理(如 Burp…...
