当前位置: 首页 > article >正文

.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.kler.cn/a/311408.html

相关文章:

  • Kubebot:一款Google云平台下的Slackbot安全测试工具
  • SpringBoot整合Freemarker(三)
  • 基于Zynq FPGA对雷龙SD NAND的测试
  • leetcode day10 动态规划篇 64+139
  • Android Studio打包时不显示“Generate Signed APK”提示信息
  • java双向链表解析实现双向链表的创建含代码
  • langchain报错记录(js)
  • node+express部署多套vue3项目,总404页面由node控制,子404页面由子vue控制,node路由重定向
  • 力扣 42.接雨水
  • MacOS Catalina 从源码构建Qt6.2开发库之01: 编译Qt6.2源代码
  • 机器学习-监督学习:朴素贝叶斯分类器
  • [C语言]第九节 函数一基础知识到高级技巧的全景探索
  • Python基础(九)——正则表达式
  • 软件工程中的耦合:类型、影响与优化策略
  • 索引的介绍
  • 【数据结构-差分】【hard】力扣995. K 连续位的最小翻转次数
  • 【RabbitMQ】重试机制、TTL
  • hku-mars雷达相机时间同步方案-软件驱动(MID360与海康MV-CB060-10UMUC-S)
  • 2-99 基于matlab多尺度形态学提取眼前节组织
  • 3 种自然语言处理(NLP)技术:RNN、Transformers、BERT
  • 0.5.4 知识库管理微调
  • Linux云计算 |【第四阶段】NOSQL-DAY1
  • C#和数据库高级:抽象类和抽象方法
  • kafka 一步步探究消费者组与分区分配策略
  • Reactor介绍,如何从简易版本的epoll修改成Reactor模型(demo版本代码+详细介绍)
  • YOLOv5/v8 + 双目相机测距