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

embedded/2024/9/24 1:35:27/

.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.ppmy.cn/embedded/115838.html

相关文章

【算法】队列与BFS

【ps】本篇有 4 道 leetcode OJ。 目录 一、算法简介 二、相关例题 1)N 叉树的层序遍历 .1- 题目解析 .2- 代码编写 2)二叉树的锯齿形层序遍历 .1- 题目解析 .2- 代码编写 3)二叉树最大宽度 .1- 题目解析 .2- 代码编写 4&#xf…

【Android】sendevent和getevent

在之前我们讨论了通过input命令,外接输入设备(鼠标)等方式来实现对屏幕的事件注入,达到实现一些自动化的操作,相对于input命令需要获取inputManager来进行操作,sendevent的方式直接写文件来注入粗糙的事件&…

如何登录通义灵码,快速开启AI编码之旅?

通义灵码个人版开发者可以使用阿里云账号登录通义灵码 IDE 端插件,本文介绍个人版开发者登录 IDE 端插件的操作指南。 登录通义灵码 步骤 1:准备工作 已成功注册阿里云账号,具体操作可参考:账号注册(PC端)…

Centos Stream 9根目录扩容

要将 sda 的剩余空间扩展给 cs-root,可以按照以下步骤进行操作。假设你已经有剩余的未分配空间在 sda 上。 步骤 1:查看当前磁盘分区情况 首先,确保你有未分配的空间在 sda 上。 lsblk步骤 2:创建新的分区 使用 fdisk 或 par…

828华为云征文|部署知识库问答系统 MaxKB

828华为云征文|部署知识库问答系统 MaxKB 一、Flexus云服务器X实例介绍1.1 云服务器介绍1.2 核心竞争力1.3 计费模式 二、Flexus云服务器X实例配置2.1 重置密码2.2 服务器连接2.3 安全组配置 三、部署 MaxKB3.1 MaxKB 介绍3.2 Docker 环境搭建3.3 MaxKB 部署3.4 Max…

Git项目管理工具

分布式版本控制系统 实际操作: 设置用户信息 git config --global user.name “itcast” git config --global user.email "hello@itcast.cn" mkdir 文件 进入

使用HTML和CSS制作网页的全面指南

目录 引言 一、理解HTML 1. 什么是HTML? 2. HTML文档的基本结构 3. 常用的HTML标签 4. 示例:创建一个简单的HTML页面 二、理解CSS 1. 什么是CSS? 2. CSS的使用方式 3. CSS选择器和属性 4. 常用的CSS属性 三、创建网页的步骤 1. 规…

java并发编程

力扣 2390. 从字符串中移除星号 给你一个包含若干星号 * 的字符串 s 。 在一步操作中,你可以: 选中 s 中的一个星号。移除星号 左侧 最近的那个 非星号 字符,并移除该星号自身。 返回移除 所有 星号之后的字符串**。** 注意&#xff1a…