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

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

news 2025/9/15 3:56:58

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

浏览器访问 AWS ECS 上部署的 Docker 容器（监听 80 端口）

✅ 一、ECS 服务配置 Dockerfile 确保监听 80 端口 EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]或 EXPOSE 80 CMD ["python3", "-m", "http.server", "80"]任务定义&#xff08;Task Definition&…...

编程新知 2025/9/14 13:50:45

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

编程新知 2025/9/14 0:21:18

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

编程新知 2025/9/11 15:27:32

三维GIS开发cesium智慧地铁教程（5）Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

编程新知 2025/8/21 15:41:11

练习（含atoi的模拟实现,自定义类型等练习）

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

编程新知 2025/9/13 17:46:22

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

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

编程新知 2025/8/6 7:06:58

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

编程新知 2025/8/6 18:56:50

蓝桥杯 2024 15届国赛 A组 儿童节快乐

P10576 [蓝桥杯 2024 国 A] 儿童节快乐 题目描述 五彩斑斓的气球在蓝天下悠然飘荡&#xff0c;轻快的音乐在耳边持续回荡&#xff0c;小朋友们手牵着手一同畅快欢笑。在这样一片安乐祥和的氛围下&#xff0c;六一来了。 今天是六一儿童节&#xff0c;小蓝老师为了让大家在节…...

编程新知 2025/8/8 10:09:48

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

编程新知 2025/9/11 12:54:50

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

编程新知 2025/9/14 21:26:19