当前位置： 首页 > news >正文

Vite 项目中环境变量的配置和使用

news 2025/11/5 21:38:42

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，如：
image.png

  "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}`)

image.png

在 html 文件中使用环境变量

在 html 文件中通过 %环境变量名% 获取相应环境变量的值

在标签体中使用

  <body><h1>当前的环境为 %VITE_ENV%</h1></body>

image.png

在标签属性中使用

<body><img src="asdasda" alt="当前的环境为 %VITE_ENV%"><div id="app"></div><script type="module" src="/src/main.ts"></script>
</body>

image.png

相关文章：

Vite 项目中环境变量的配置和使用

Vite 项目中环境变量的声明 我们要在 Vite 项目中进行环境变量的声明&#xff0c;那么需要在项目的根目录下&#xff0c;新建 .env.[mode] 文件用于声明环境变量&#xff0c;如&#xff1a; .env.test 文件用于测试环境下项目全局变量的声明.env.dev 文件用于开发环境下项目全…...

编程日记 2024/4/6 4:55:46

C++读取.bin二进制文件

C读取.bin二进制文件 在C中&#xff0c;可以使用文件输入/输出流来进行二进制文件的读写操作&#xff0c;方便数据的保存和读写。 //C读取bin二进制文件 int read_bin() {std::ifstream file("data_100.bin", std::ios::in | std::ios::binary);if (file) {// 按照…...

编程日记 2024/4/6 4:54:45

【ZZULIOJ】1038: 绝对值最大（Java）

目录 题目描述 输入 输出 样例输入 Copy 样例输出 Copy code 题目描述 输入3个整数&#xff0c;输出绝对值最大的那个数。 输入 输入包含3个int范围内的整数&#xff0c;用空格隔开。 输出 输出三个数中绝对值最大的数&#xff0c;单独占一行。若绝对值最大的数不唯…...

编程日记 2024/4/6 4:53:44

递归算法讲解2

前情提要 上一篇递归算法讲解在这里 递归算法讲解&#xff08;结合内存图&#xff09; 没看过的小伙伴可以进去瞅一眼&#xff0c;谢谢&#xff01; 递归算法的重要性 递归算法是非常重要的&#xff0c;如果想要进大厂&#xff0c;以递归算法为基础的动态规划是必考的&…...

编程日记 2024/4/6 4:45:38

机器学习第33周周报Airformer

文章目录 week33 AirFormer摘要Abstract一、论文的前置知识1. 多头注意力机制&#xff08;MSA&#xff09;2. 具有潜变量的变分模型 二、文献阅读1. 题目2. abstract3. 问题与模型阐述3.1 问题定义3.2 模型概述3.3 跨空间MSA&#xff08;DS-MSA&#xff09;3.4 时间相关MSA&…...

编程日记 2024/4/6 4:44:37

设计模式(12)：代理模式

一.核心作用 通过代理&#xff0c;控制对对象的访问;可以详细控制访问某个对象的方法&#xff0c;在调用这个方法前做前置处理&#xff0c;调用这个方法后做后置处理。 二.核心角色 抽象角色&#xff1a; 定义代理角色和真实角色的公共对外方法;真实角色&#xff1a; 实现抽…...

编程日记 2024/4/6 4:42:35

前端9种图片格式基础知识, 你应该知道的

彩色深度 彩色深度标准通常有以下几种&#xff1a; 8位色&#xff0c;每个像素所能显示的彩色数为2的8次方&#xff0c;即256种颜色。16位增强色&#xff0c;16位彩色&#xff0c;每个像素所能显示的彩色数为2的16次方&#xff0c;即65536种颜色。24位真彩色&#xff0c;每个…...

编程日记 2024/4/6 4:41:34

ChatGPT 与 OpenAI 的现代生成式 AI（上）

原文&#xff1a;Modern Generative AI with ChatGPT and OpenAI Models 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 序言 本书以介绍生成式 AI 领域开始&#xff0c;重点是使用机器学习算法创建新的独特数据或内容。它涵盖了生成式 AI 模型的基础知识&#xff0c…...

编程日记 2024/4/6 4:35:29

全量知识系统 程序详细设计之架构设计：一个信息系统架构

统架构&#xff0c;整体设计分成了三部分--三种方面&#xff1a;信息nformation、系统Syste 原文 以下是对全知系统程序详细设计需要的架构规划的考虑。 全知系统架构是一个信息系统架构&#xff0c;整体设计分成了三部分&#xff08;三种“方面”&#xff09;&#xff1a;信…...

编程日记 2024/4/6 4:34:28

从零开始：成功进入IT行业的方法与技巧

如今&#xff0c;信息技术&#xff08;IT&#xff09;行业成为了就业市场上的热门领域。由于其快速发展和广阔的职业机会&#xff0c;许多人希望能够进入这个行业。然而&#xff0c;对于没有任何相关背景知识的人来说&#xff0c;要成功进入IT行业可能会面临一些挑战。本文将分…...

编程日记 2024/4/6 4:29:23

SpringCloud - 如何本地调试不会注册到线上环境（Nacos）？

问题描述 有时候我们需要本地调试注册到 Nacos 上&#xff0c;但是会影响线上服务的 Feign 请求打到本地导致不通影响了线上业务。 原因分析 一般最传统的解决方案就是修改本地 bootstrap.yml 的 spring.cloud.nacos.discovery.namespace spring:application:name: app-serv…...

编程日记 2024/4/6 4:28:22

1.9 面试经典150题 除自身以外数组的乘积

除自身以外数组的乘积 给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0…...

编程日记 2024/4/6 4:25:20

【美团笔试题汇总】2023-09-02-美团春秋招笔试题-三语言题解(CPP/Python/Java)

&#x1f36d; 大家好这里是KK爱Coding &#xff0c;一枚热爱算法的程序员 ✨ 本系列打算持续跟新美团近期的春秋招笔试题汇总&#xff5e; &#x1f4bb; ACM银牌&#x1f948;| 多次AK大厂笔试 &#xff5c; 编程一对一辅导 &#x1f44f; 感谢大家的订阅➕ 和 喜欢&#x1f…...

编程日记 2024/4/6 4:20:15

小黑逆向爬虫探索与成长之路:小黑独立破解毛毛租数据加密与解密

前言 有道和招标网的加密入口定位在前面两期做了详细的介绍&#xff0c;本小结将通过简单的关键词搜索定位到加密与解密入口 数据接口寻找与请求 根据响应数据长度&#xff0c;确定数据接口&#xff0c;发现传入的参数需要加密&#xff0c;响应的结果需要解密&#xff0c;后…...

编程日记 2024/4/6 4:19:14

Generative Question-Answering with Long-Term Memory

...

编程日记 2024/4/6 4:17:12

深入浅出 -- 系统架构之微服务架构常见的六种设计模式

面向服务的架构&#xff08;SOA&#xff09; 面向服务的架构&#xff08;SOA&#xff09;是一种设计方法&#xff0c;也是一个组件模型&#xff0c;它将应用程序的不同功能单元&#xff08;称为服务&#xff09;通过这些服务之间定义良好的接口和契约联系起来。接口是采用中立的…...

编程日记 2024/4/6 4:16:11

SSM框架学习——SqlSession以及Spring与MyBatis整合

SqlSession以及Spring与MyBatis整合 准备所需要的JAR包 要实现MyBatis与Spring的整合&#xff0c;很明显需要这两个框架的JAR包&#xff0c;但是只是使用这两个框架中所提供的JAR包是不够的&#xff0c;还需要配合其他包使用&#xff1a; Spring的JAR包MyBatis的JAR包Spring…...

编程日记 2024/4/6 4:15:10

6、【单例模式】确保了一个类在程序运行期间只有一个实例

你好&#xff0c;我是程序员雪球 在软件设计中&#xff0c;单例模式是一种常见的设计模式。它确保了一个类在程序运行期间只有一个实例&#xff0c;并提供了全局访问该实例的方式。单例模式在许多场景中都有广泛的应用&#xff0c;例如共享资源管理、数据库连接、日志记录器等…...

编程日记 2024/4/6 4:13:07

vuex插件实现数据共享

vuex插件 vuex是管理多个vue通用的数据的插件.(状态管理工具,状态是数据) 我们对于多个vue文件之间的共同数据,是用props传递,或者对于一个vue实例对象,进行绑定,传参,也是多次传参,多个文件之间,比较麻烦. 但是我们vuex会创建一个公共对象,从这个公共对象上赋值,比较简单易…...

编程日记 2024/4/6 4:11:05

【吊打面试官系列】Redis篇 - 使用过 Redis 分布式锁么，它是什么回事？

大家好&#xff0c;我是锋哥。今天分享关于 【使用过 Redis 分布式锁么&#xff0c;它是什么回事&#xff1f;】面试题&#xff0c;希望对大家有帮助&#xff1b; 使用过 Redis 分布式锁么&#xff0c;它是什么回事&#xff1f; 先拿 setnx 来争抢锁&#xff0c;抢到之后&#…...

编程日记 2024/4/6 4:10:04

2025年能源电力系统与流体力学国际会议 (EPSFD 2025)

2025年能源电力系统与流体力学国际会议&#xff08;EPSFD 2025&#xff09;将于本年度在美丽的杭州盛大召开。作为全球能源、电力系统以及流体力学领域的顶级盛会&#xff0c;EPSFD 2025旨在为来自世界各地的科学家、工程师和研究人员提供一个展示最新研究成果、分享实践经验及…...

编程新知 2025/11/2 20:21:50

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

编程新知 2025/9/30 14:27:04

学校招生小程序源码介绍

基于ThinkPHPFastAdminUniApp开发的学校招生小程序源码&#xff0c;专为学校招生场景量身打造&#xff0c;功能实用且操作便捷。 从技术架构来看&#xff0c;ThinkPHP提供稳定可靠的后台服务&#xff0c;FastAdmin加速开发流程&#xff0c;UniApp则保障小程序在多端有良好的兼…...

编程新知 2025/10/19 10:09:01

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

编程新知 2025/11/3 3:53:34

什么是EULA和DPA

文章目录 EULA&#xff08;End User License Agreement&#xff09;DPA&#xff08;Data Protection Agreement&#xff09;一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA&#xff08;End User License Agreement&#xff09; 定义&#xff1a; EULA即…...

编程新知 2025/10/18 7:13:10

数据库分批入库

今天在工作中&#xff0c;遇到一个问题&#xff0c;就是分批查询的时候&#xff0c;由于批次过大导致出现了一些问题&#xff0c;一下是问题描述和解决方案&#xff1a; 示例&#xff1a; // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...

编程新知 2025/7/18 1:50:27

关键领域软件测试的突围之路：如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

编程新知 2025/11/3 21:36:14

LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf

FTP 客服管理系统 实现kefu123登录&#xff0c;不允许匿名访问&#xff0c;kefu只能访问/data/kefu目录&#xff0c;不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...

编程新知 2025/10/26 14:58:46

零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程

STM32F1 本教程使用零知标准板&#xff08;STM32F103RBT6&#xff09;通过I2C驱动ICM20948九轴传感器&#xff0c;实现姿态解算&#xff0c;并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化&#xff0c;适合嵌入式及物联网开发者。在基础驱动上新增…...

编程新知 2025/11/3 11:57:57

一些实用的chrome扩展0x01

简介 浏览器扩展程序有助于自动化任务、查找隐藏的漏洞、隐藏自身痕迹。以下列出了一些必备扩展程序&#xff0c;无论是测试应用程序、搜寻漏洞还是收集情报&#xff0c;它们都能提升工作流程。 FoxyProxy 代理管理工具&#xff0c;此扩展简化了使用代理&#xff08;如 Burp…...

编程新知 2025/10/26 9:24:28