【Vite环境变量】import.meta.env 和 loadEnv使用和区别

news2024/12/23 18:26:56

前言

我们在做项目时需要各种配置信息(如应用标题、API 地址等),这些配置信息可能在不同环境下有所不同(如开发环境和生产环境)。

如果每次更改开发或者更改生产环境需要修改源代码中的相关配置,这会导致应用程序的可维护性变得极低!因此,我们可以将这些配置信息通过环境变量来进行管理。

一、 环境变量和使用场景

所以,环境变量的定义也就是:会根据当前的代码环境产生值的变化的变量就叫做环境变量。

在 Vite 项目中,使用环境变量提供了一种在不同环境下定制化应用行为的方式。通过读取环境变量,我们可以设置不同的配置信息。

开发中常见的场景有:

  1. 区分开发和生产环境

通过环境变量可以方便地区分当前应用运行的是开发还是生产环境。例如,在开发环境下,可以启用控制台日志和调试工具,而在生产环境下,则需要关闭这些功能以提升性能和安全性。

  1. 配置应用访问的 API 地址

应用通过 HTTP 请求与后端 API 进行通信。在开发和生产环境下,API 服务器的地址可能不同。通过环境变量,可以将 API 地址从应用代码中抽离出来,并在不同环境中指定不同的地址。

  1. 其他配置信息

除了 API 地址外,应用还有很多其他的配置信息,例如应用标题、主题颜色、版本号等。这些信息可以使用环境变量进行管理,避免硬编码在应用代码中,提高代码的可维护性和可扩展性。

  1. 构建时的配置

在开发环境下启用调试模式,在生产环境下禁用控制台输出等。此外,还可以使用环境变量来进行资源定位,例如根据当前环境选择不同的 API 地址、CDN 路径等。

二、import.meta.envloadEnv

  • import.meta.env

1. 在 .env 文件中定义环境变量

VITE_APP_TITLE=Hello Vite!

2. 在代码中可以使用 import.meta.env 直接读取环境变量

// main.js
console.log(import.meta.env.VITE_APP_TITLE); // 输出:Hello Vite!
  • loadEnv 

1. 在代码中需要先导入 Vite 提供的环境变量模块

// main.js
import.meta.env.DEV && require('dotenv').config(); // 在开发环境下自动加载 .env 文件
import { loadEnv } from 'vite';
loadEnv();

2. 使用 loadEnv 方法读取环境变量

// main.js
console.log(process.env.VITE_APP_TITLE); // 输出:Hello Vite!

三、使用注意事项

1. import.meta.env 和 loadEnv 的使用场景不同

import.meta.env 是在运行时获取环境变量的值,适用于应用程序代码中需要动态获取环境变量的场合。(配置文件中获取不到,因为配置文件是在构建时被读取!!!)

loadEnv 则是在构建时加载环境变量,适用于打包时(构建时)需要引用环境变量的场合。

2. 环境变量的值必须以 VITE_ 开头

与上面提到的一样,Vite 要求所有的环境变量必须以 VITE_ 开头。如果你想要使用 import.meta.env 或者 loadEnv 获取环境变量的值,需要遵循这个规则。

不过,也可以获取非VITE_ 开头得变量,但是要修改配置文件中的prefixes 配置(不推荐)。

而loadEnv函数可以通过改变第三个参数获取到非VITE_前缀的变量。

function loadEnv(
  mode: string,
  envDir: string,
  prefixes: string | string[] = 'VITE_',
): Record<string, string>

上面的第三个参数就是前缀,默认VITE_ ,不过可以改为 '' 空字符串。

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

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

相关文章

老生常谈:接口幂等性,防止并发插入重复数据

分布式系统中&#xff0c;接口幂等性问题&#xff0c;对于开发人员来说&#xff0c;是一个跟语言无关的公共问题。不知道你有没有遇到过这些场景&#xff1a; 有时我们在填写某些form表单时&#xff0c;保存按钮不小心快速点了两次&#xff0c;表中竟然产生了两条重复的数据&a…

AI时代的三类人:探索掌握AIGC,引领未来的人才之路

&#xff08;本文阅读时间&#xff1a;6 分钟&#xff09; 1 AI时代&#xff1a;ChatGPT引领AIGC技术革命 对于那些热衷于探索新技术的小伙伴而言&#xff0c;ChatGPT早已超越了抽象的概念&#xff0c;我们对其能力已有所了解。那么&#xff0c;ChatGPT究竟能够做些什么呢&…

Java 集合全教程

一、集合简介 集合&#xff08;有时称为容器&#xff09;只是将多个元素分组到单个单元中的对象。集合用于存储、检索、操作和传达聚合数据。通常&#xff0c;它们表示形成自然组的数据项&#xff0c;例如扑克手&#xff08;纸牌集合&#xff09;、邮件文件夹&#xff08;字母…

【Java多线程进阶】synchronized工作原理

前言 本期讲解 synchronized 工作的原理以及常见的锁优化机制&#xff0c;相信大家在看完这篇博文后对 synchronized 工作流程有一定的理解。话不多说&#xff0c;让我们快速进入学习吧~ 目录 1. 锁的工作流程 2. 偏向锁 3. 轻量级锁和重量级锁 3.1 轻量级锁 3.2 重量级锁…

Kubernetes基本存储

Kubernetes基本存储 容器的生命周期可能很短&#xff0c;会被频繁地创建和销毁&#xff0c;容器销毁时&#xff0c;保存在容器中的数据也会被清除。为了持久化保存容器中数据&#xff0c;引入Volume概念。 Volume时Pod中多个容器共同访问的共享目录&#xff0c;它被定义在Pod中…

“碳”寻青蓝锦色,锦江酒店(中国区)用行动点亮酒店可持续发展

第52个世界环境日之际&#xff0c;为响应“减塑捡塑”号召&#xff0c;锦江酒店&#xff08;中国区&#xff09;以“‘碳’寻青蓝锦色”为主题&#xff0c;在6月5日至6月11日期间&#xff0c;开启第二届“绿色生活创益周”&#xff0c;通过线上线下联动&#xff0c;倡导时尚低碳…

2023智源大会议程公开丨类脑计算论坛

6月9日&#xff0c;2023北京智源大会&#xff0c;将邀请这一领域的探索者、实践者、以及关心智能科学的每个人&#xff0c;共同拉开未来舞台的帷幕&#xff0c;你准备好了吗&#xff1f;与会知名嘉宾包括&#xff0c;图灵奖得主Yann LeCun、图灵奖得主Geoffrey Hinton、OpenAI创…

Mocha AE:Clip 模块

Clip&#xff08;剪辑&#xff09;模块主要用于对素材或遮罩文件的格式进行查看或设置&#xff0c;包括视频格式、时间码格式、色彩空间等&#xff0c;还可以进行裁剪。 General 常规 Input 输入 当前图层素材。 Matte for Layer n 图层 n 的遮罩 Name 名称 显示素材的名称。 …

通信大史记:互联网的起源故事

点击文末“阅读原文”即可参与节目互动 剪辑、音频 / 卷圈 运营 / SandLiu 卷圈 监制 / 姝琦 文案 / 朱峰 产品统筹 / bobo 这是一期“两年更”的节目&#xff0c;通信大史记录完第一期后&#xff0c;因为资料准备和主播时间的关系一直没有后续更新。今天&#xff0c;我们…

nodejs的path模块

path路径模块 path模块是Node.js官方提供的&#xff0c;用来处理路径的模块。提供一系列的方法和属性&#xff0c;用来满足用户对路径的处理需求。 例如&#xff1a; 如果在js代码中&#xff0c;使用path模块来处理路径&#xff0c;需要先导入 const pathrequire(path)常用的…

chatgpt赋能python:Python如何调成白色的SEO文章

Python 如何调成白色的 SEO 文章 介绍 Python 是一种流行的编程语言&#xff0c;在数据分析、人工智能、Web 开发以及其他许多领域都有广泛的应用。然而&#xff0c;很少有人会把 Python 与 SEO 联系起来。 事实上&#xff0c;Python 是一个强大的工具&#xff0c;可以帮助 …

软件工程师,学会封装不香么

什么是封装 从面向对象编程的角度来说&#xff0c;封装是指利用抽象数据类型将数据和基于数据的操作封装在一起&#xff0c;使其构成一个不可分割的独立实体&#xff0c;数据被保护在抽象数据类型的内部&#xff0c;尽可能地隐藏内部的细节&#xff0c;只保留一些对外接口使之与…

rk3568 TF卡启动

rk3568 SD卡启动 SD卡启动系统&#xff0c;它可以让rk3568在没有硬盘或其他存储设备的情况下启动和运行操作系统。这使得rk3568变得与树梅派一样灵活切换系统&#xff0c;与此同时进行故障排查和修复&#xff0c;而不需要拆卸设备或者使用专业的烧录工具。SD卡启动还可以方便地…

音视频同步的方法:深入探索基于FFmpeg的音视频同步策略

音视频同步艺术&#xff1a;深入探索基于FFmpeg的同步策略 &#xff08;一&#xff09;音视频同步的基本概念与重要性&#xff08;Basic Concepts and Importance of Audio-Video Synchronization&#xff09;1.1 音视频同步的定义与影响&#xff08;Definition and Impact of …

【SQL】Oracle数据库实现远程访问

文章目录 前言1. 数据库搭建2. 内网穿透2.1 安装cpolar内网穿透2.2 创建隧道映射 3. 公网远程访问4. 配置固定TCP端口地址4.1 保留一个固定的公网TCP端口地址4.2 配置固定公网TCP端口地址4.3 测试使用固定TCP端口地址远程Oracle 前言 Oracle&#xff0c;是甲骨文公司的一款关系…

【Python入门】Python循环语句(for循环的基础语法)

前言 Python循环语句 1. for循环的基础语法1.1 for循环1.2 程序中的for循环1.3 for循环语句1.4 for循环注意点1.5 总结1.6 练习案例&#xff1a;数一数有几个a 2. range语句2.1 range语句讲解2.2 for循环遍历range序列2.3 总结2.4 练习案例&#xff1a;有几个偶数 3. 变量作用域…

RFID软件:简介、功能和应用范围

在当今快节奏的商业环境中&#xff0c;RFID&#xff08;射频识别&#xff09;技术已经成为物流、供应链和库存管理等领域中不可或缺的工具。本文将向您介绍RFID软件的基本知识&#xff0c;探讨其功能和广泛应用的范围。 第一部分&#xff1a;RFID软件简介 RFID软件是一种应用…

【开源项目】SofaBoot实现Spring Bean 异步初始化的源码拆解

使用场景 在实际使用 Spring/Spring Boot 开发中&#xff0c;一些 Bean 在初始化过程中执行准备操作&#xff0c;如拉取远程配置、初始化数据源等等。在应用启动期间&#xff0c;这些 Bean 会增加 Spring 上下文刷新时间&#xff0c;导致应用启动耗时变长。 Demo展示 Spring…

苹果 Apple 发布的 AR 头显 Vision Pro 介绍

苹果今天凌晨的发布会&#xff0c;隆重推出了用了8 年时间研发的AR&#xff08;增强现实&#xff09;头戴显示器 Vision Pro。作为苹果 AR系列的最新成员&#xff0c;为用户带来了前所未有的沉浸式增强现实体验。 硬件 12个摄像头 &#xff0c;包括苹果首个 3D 相机&#xff0c…

【容器云架构】Calico 组件架构

Calico 组件 下图显示了 Kubernetes 的必需和可选 Calico 组件&#xff0c;具有网络和网络策略的本地部署。 Calico 组件 Calico API serverFelixBIRDconfdDikastesCNI pluginDatastore pluginIPAM pluginkube-controllersTyphacalicoctl 云编排器的插件 Plugins for cloud orc…