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

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

news 2026/2/8 11:05:21

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

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1）　にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために　＆　ように（３）そう（４）にする3、…...

编程新知 2025/11/20 7:52:01

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/12/14 11:45:02

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

编程新知 2026/2/6 13:42:22

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

编程新知 2025/10/20 4:39:36

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 的密码…...

编程新知 2026/1/25 9:03:19

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...

编程新知 2025/12/25 4:05:41

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...

编程新知 2025/9/30 8:10:20

Vue 模板语句的数据来源

&#x1f9e9; Vue 模板语句的数据来源&#xff1a;全方位解析 Vue 模板&#xff08;<template> 部分&#xff09;中的表达式、指令绑定&#xff08;如 v-bind, v-on&#xff09;和插值&#xff08;{{ }}&#xff09;都在一个特定的作用域内求值。这个作用域由当前 组件…...

编程新知 2026/2/1 6:18:18

MySQL的pymysql操作

本章是MySQL的最后一章&#xff0c;MySQL到此完结&#xff0c;下一站Hadoop&#xff01;&#xff01;&#xff01; 这章很简单&#xff0c;完整代码在最后&#xff0c;详细讲解之前python课程里面也有&#xff0c;感兴趣的可以往前找一下 一、查询操作 我们需要打开pycharm …...

编程新知 2026/1/20 12:20:43

保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画！！！

目录 补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现 内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示 逐帧…...

编程新知 2026/2/4 3:31:19