.env文件详解(vite项目全局配置文件)

.env文件是一个用于存储环境变量的文件。在开发和部署应用程序时,经常需要在不同的环境中配置不同的变量,例如 API 地址、数据库连接信息、密钥等。在许多应用程序中,.env 文件通常包含一个或多个键值对,用于存储环境变量。

Vite 中的 .env 文件还可以用于配置构建时的变量

需要注意的是,Vite 中的环境变量必须以 VITE_ 前缀开头才能被识别。例如,如果您在 .env 文件中定义了一个名为 API_URL 的变量,它将不会被 Vite 识别。您应该将其命名为 VITE_API_URL。

此外,需要将 .env 文件放置在项目根目录下,并且只能包含键值对,例如:

VITE_API_URL=https://api.example.com
VITE_GLOB_APP_TITLE =YingSide_Demo

关于.env文件的规范,在vite官方文档中有具体说明:环境变量和模式

创建.env相关文件

大多数情况下,我们在项目中创建.env文件,都会是下面的形式

.env                # 所有情况下都会加载
.env.[mode]         # 只在指定模式下加载

[mode]指定的是具体模式,所以,一般对于开发,生产和测试环境,都会指定具体的环境

.env                
.env.development
.env.production
.env.test

(1).env文件

# 所有环境都会加载
# title
VITE_GLOB_APP_TITLE = YingSide_DEMO# 本地运行端口号
VITE_PORT = 3000# 启动时自动打开浏览器
VITE_OPEN = true

(2).env.development文件

# 只在开发环境加载
VITE_USER_NODE_ENV = development# 打包时是否删除 console
VITE_DROP_CONSOLE = true# 公共基础路径
VITE_PUBLIC_PATH = /# 开发环境接口地址
VITE_API_URL = /api# 开发环境跨域代理,可配置多个
VITE_PROXY = [["/api","https://mock.mengxuegu.com/mock/6453b964af3bc37f99a23916"]]

(3).env.production文件

# 只在生产环境加载
VITE_USER_NODE_ENV = production# 公共基础路径
VITE_PUBLIC_PATH = /# 是否启用 gzip 或 brotli 压缩打包,如果需要多个压缩规则,可以使用 “,” 分隔
# Optional: gzip | brotli | none
VITE_BUILD_COMPRESS = none# 打包压缩后是否删除源文件
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false# 打包时是否删除 console
VITE_DROP_CONSOLE = true# 是否启用图片压缩
VITE_USE_IMAGEMIN = true# 线上环境接口地址
VITE_API_URL = "http://www.yanhongzhi.com"

(4).env.test文件

# 测试环境
VITE_USER_NODE_ENV = test# 公共基础路径
VITE_PUBLIC_PATH = /# 是否启用 gzip 或 brotli 压缩打包,如果需要多个压缩规则,可以使用 “,” 分隔
# Optional: gzip | brotli | none
VITE_BUILD_COMPRESS = none# 打包压缩后是否删除源文件
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false# 打包时是否删除 console
VITE_DROP_CONSOLE = true# 测试环境接口地址
VITE_API_URL = "http://www.yanhongzhi.com"

每个.env文件无非也就是规定一些环境变量,所以都大同小异。目的也很简单,你可以认为其实就是定义了一些全局变量。根据自己项目的具体需要进行配置即可。

切换环境

不是配置了不同环境的文件吗?怎么确定当前是什么环境?很简单,答案就在package.json文件中

"scripts": {"dev": "vite","build": "vue-tsc && vite build",//....
}

默认的npm run dev和npm run build就分别对应development开发环境和production生成环境。

当然,我们也可以自己进行设置,比如:

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

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

相关文章

“一屏显江山”,激光显示重构「屏中世界」

【潮汐商业评论/原创】 2024年国庆期间,曾感动过无数国人的舞蹈诗剧《只此青绿》改编的同名电影即将上映,而这一次观众们不必走进电影院,在家里打开官方合作的海信激光电视也能享受到同等的视听效果,这是激光电视在观影场景领域的…

【C++ 基础数学 】2121. 2615相同元素的间隔之和|1760

本文涉及的基础知识点 基础数学 LeetCode2121. 相同元素的间隔之和 难度分:1760 令2165,和此题几乎相等。 给你一个下标从 0 开始、由 n 个整数组成的数组 arr 。 arr 中两个元素的 间隔 定义为它们下标之间的 绝对差 。更正式地,arr[i] 和…

rockylinux9.4单master节点k8s1.28集群部署

kubernetes集群部署 常见的 k8s 部署方式包括:二进制包、kubeadm 工具、云服务提供商、或通过一些开源的工具搭建,例如:sealos、kuboard、Runcher、kubeSphere。 本文使用kubeadm的部署方式,部署k8s1.28版本 我本地安装资源规划…

Linux 进程2

环境变量 再Linux操作系统中一切皆文件,这个环境变量自然也是一个文件,它的作用是辅助我们使用操作系统还可以辨识我们是什么用户(一般用户,root用户)。 env是读取完整环境变量的指令,里面记录了许多我登录操作系统所用的用户的信…

随笔 程序运行的基本原理

程序是如何运行,又是如何崩溃的? 正如标题所言,今天我们来聊聊程序是如何执行的?以及又是如何崩溃的?我们哼哧哼哧写的代码并不是程序,本质上不过是一个文本文件。即便我们将我们写的代码通过编译生成的可…

用Go语言构建健壮的并发系统:深入理解错误传播与处理

解锁Python编程的无限可能:《奇妙的Python》带你漫游代码世界 在当今的软件开发中,构建并发和分布式系统已经成为常态。然而,在这些系统中,错误的发生频率高且定位困难。如果我们能够深入考虑错误如何在系统中传播,以及最终如何呈现给用户,那么我们就能为自己、团队和用…

apache paimon简介(官翻)

介绍 如下架构所示: 读/写操作: Paimon 支持多样化的数据读写方式,并支持 OLAP 查询。 读取: 支持从历史快照(批处理模式)中消费数据,从最新偏移量(流处理模式)中读取数据,或以混合方式读取增量快照。写入: 支持从数据库变更日志(CDC)进行流式同步,从离线数据中…

构建高效企业客户管理系统:SpringBoot应用

1 绪论 1.1研究背景 随着网络不断的普及发展,企业客户管理系统依靠网络技术的支持得到了快速的发展,首先要从员工的实际需求出发,通过了解员工的需求开发出具有针对性的首页、个人中心、员工管理、客户信息管理、行业类型管理、项目信息管理、…

LabVIEW界面输入值设为默认值

在LabVIEW中,将前面板上所有控件的当前输入值设为默认值,可以通过以下步骤实现: 使用控件属性节点:你可以创建一个属性节点来获取所有控件的引用。 右键点击控件,选择“创建” > “属性节点”。 设置属性节点为“D…

HDMI20协议解析_Audio_Clock_Regeneration

HDMI20协议解析_Audio_Clock_Regeneration 1.版本说明 日期作者版本说明20240918风释雪初始版本 2.概述 当通过HDMI传输音频信号时,Audio Clock Regeneration(ACR)是必须要传输的数据包之一; HDMI传输过程中,音频采样…

CentOS7搭建Hadoop3集群教程

一、集群环境说明 1、用VMware安装3台Centos7虚拟机 2、虚拟机配置:2C,2G内存,50G存储 3、集群架构设计 从表格中,可以看出,Hadoop集群,主要有2个模块服务,一个是HDFS服务,一个是YAR…

经典sql题(七)查找直播间最大在线人数

使用 SQL 分析房间用户状态变化 本文将详细介绍如何使用 SQL 的窗口函数和聚合函数,分析用户在房间中的状态变化,目标是计算每个房间指定时间段内的最大用户状态。 示例数据 假设我们的数据表包含以下字段: room_iduser_idlogin_timelogo…

8.进销存系统(基于springboot的进销存系统)

目录 1.系统的受众说明 2.开发技术与环境配置 2.1 SpringBoot框架 2.2 Java语言简介 2.3 MySQL环境配置 2.4 idea介绍 2.5 mysql数据库介绍 2.6 B/S架构 3.系统分析与设计 3.1 可行性分析 3.1.1 技术可行性 3.1.2 操作可行性 3.1.3经济可行性 3.4.1 数据库…

第159天:安全开发-Python-协议库爆破FTPSSHRedisSMTPMYSQL等

目录 案例一: Python-文件传输爆破-ftplib 库操作 ftp 协议 ​案例二: Python-数据库爆破-redis 库操作redis 协议 案例三:Python-邮件爆破-smtplib 库操作 smtp 协议 案例四:Python-登录爆破-paramiko库操作ssh协议 案例五&#xff1a…

andriod studio 学习1

res —> layout: 放置布局文件 res —> drawable-xhdpi: 放置图标、图片文件 res —> values: 放置style、字符串、颜色等资源 LinearLayout: 线性布局 RelativeLayout:相对布局 布局相关设置:padding 、background TextView:展示文本 android…

Web 服务器介绍 | 通过 Tomcat 说明其作用

1. 什么是 Web 服务器? Web服务器是一种用于存储、处理和提供网页或Web应用程序的服务器。它通过HTTP(超文本传输协议)与客户端(通常是浏览器)进行通信,接收客户端的请求(如网页请求&#xff0…

【RPA私教课:UIPath】RPA 赋能科技企业,登录时验证码自动截取

在某科技型企业里,专门设置了一个验证码接收系统。每当用户进行登录操作时,都必须从这个系统中抓取最新的登录验证码,以确保登录的安全性。 具体需求如下: 客户会预先在表格中妥善保存众多的账户和密码。当 RPA 机器人在业务系统…

Vue使用axios实现Ajax请求

1、什么是 axios 在实际开发过程中,浏览器通常需要和服务器端进行数据交互。而 Vue.js 并未提供与服务器端通信的接口。从 Vue.js 2.0 版本之后,官方推荐使用 axios 来实现 Ajax 请求。axios 是一个基于 promise 的 HTTP 客户端。 关于 promise 的详细介…

从零开始讲DDR(3)——DDRC与DDRPYH

一、DDR的使用 在之前的文章中我们介绍了DDR的基本概念,但是DDR内存的操作不仅仅是简单的数据读取和写入,它包括许多时序要求和信号调度。为了让DDR内存有效运作,系统需要在逻辑层和物理层之间进行大量的协作。我们拿出一张DDR的操作简化状态…

rfid超高频手持移动终端的性能特点

超高频手持移动终端的工作频率范围通常在860 MHz至960 MHz之间,具体频段根据不同的地区和国家有所不同,下面我们就一起来了解一下,超高频手持移动终端的性能特点。 超高频手持移动终端的性能特点 高效率与高速度:超高频手持移动…