vue项目中中怎么获取环境变量

在 Vue 项目中,有几种获取环境变量的方法。最常用的是通过 import.meta.env 来访问。

1.首先在项目根目录创建环境变量文件:

.env                # 所有环境都会加载
.env.development    # 开发环境
.env.production     # 生产环境

2.在环境变量文件中定义变量(必须以 VITE_ 开头):

VITE_API_URL=http://example.com
VITE_APP_TITLE=My App

3.在代码中使用:

// 获取环境变量
const apiUrl = import.meta.env.VITE_API_URL
const appTitle = import.meta.env.VITE_APP_TITLE// 获取当前模式
console.log(import.meta.env.MODE) // 'development' 或 'production'// 判断是否是开发环境
console.log(import.meta.env.DEV) // true 或 false

注意事项:

只有以 VITE_ 开头的环境变量才会暴露给客户端代码 环境变量在构建时就会被静态替换,所以不能使用动态的 key 来获取
如果要在运行时改变环境变量,需要重新构建应用(重启服务器)

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

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

相关文章

IDEA 2024安装指南(含安装包以及使用说明 cannot collect jvm options 问题 四)

汉化 setting 中选择插件 完成 安装出现问题 1.可能是因为之前下载过的idea,找到连接中 文件,卸载即可。

js+jquery实现经典推箱子游戏

纯前端项目,只使用html,css,js,jquery实现经典推箱子游戏,直接下载本地双击index.html即可运行体验。 游戏展示 开始界面 完成游戏 代码展示

《文件操作》

一 . 文本文件和二进制文件 根据数据的组织形式,数据文件被分为了二进制文件和文本文件 数据在内存中是以二进制的形式存储,如果不加转换的输出到外存的文件中,就是二进制文件。 如果要求在外存上以ASCII 码的形式存储,则需要再存…

监控报警系统的指标、规则与执行闭环

随笔 从千万粉丝“何同学”抄袭开源项目说起,为何纯技术死路一条? 数据源的统一与拆分 监控报警系统的指标、规则与执行闭环 java 老矣,尚能饭否? 一骑红尘妃子笑,无人知是荔枝来! 有所依 我们如何知道系统交易…

LLaMA-Mesh: Unifying 3D Mesh Generation with Language Models 论文解读

目录 一、概述 二、相关工作 1、LLMs到多模态 2、3D对象生成 3、自回归的Mesh生成 三、LLaMA-Mesh 1、3D表示 2、预训练模型 3、有监督的微调数据集 4、数据集演示 四、实验 1、生成的多样性 2、不同模型text-to-Mesh的比较 3、通用语境的评估 一、概述 该论文首…

【大数据学习 | Spark-Core】Spark提交及运行流程

spark的集群运行结构 我们要选择第一种使用方式 命令组成结构 spark-submit [选项] jar包 参数 standalone集群能够使用的选项。 --master MASTER_URL #集群地址 --class class_name #jar包中的类 --executor-memory MEM #executor的内存 --executor-cores NUM # executor的…

ES6 、ESNext 规范、编译工具babel

ES6 、ESNext 规范、编译工具简介 ES6ES(ECMAScript) vs JS常量进一步探讨 obj对象的扩展面试:使对象属性也不能更改——Object.freeze(obj) 解构deconstruction变量的解构赋值:数组解构赋值:对象解构赋值:…

【MyBatis】全局配置文件—mybatis.xml 创建xml模板

文章目录 模板文件配置元素typeAliasessettings 模板文件 创建模板 按照顺序打开【File】–>【settings】–>【Editor】–>【File and Code Templates】&#xff08;或直接搜索&#xff09; <?xml version"1.0" encoding"UTF-8" ?> <…

小程序免备案:快速部署与优化的全攻略

小程序免备案为开发者提供了便捷高效的解决方案&#xff0c;省去繁琐的备案流程&#xff0c;同时通过优化网络性能和数据传输&#xff0c;保障用户体验。本文从部署策略、应用场景到技术实现&#xff0c;全面解析小程序免备案的核心优势。 小程序免备案&#xff1a;快速部署与优…

【数据结构】—— 线索二叉树

引入 我们现在提倡节约型杜会&#xff0c; 一切都应该节约为本。对待我们的程序当然也不例外&#xff0c;能不浪费的时间或空间&#xff0c;都应该考虑节省。我们再观察团下图的二叉树&#xff08;链式存储结构)&#xff0c;会发现指针域并不是都充分的利用了&#xff0c;有许…

Outlook for Mac同步错误:The total attachment size exceeds the limit.

现象 mac一直弹出同步错误提示&#xff1a;The total attachment size exceeds the limit. 怎么也去不掉 解决办法 ①清除收件箱和已发送邮件的缓存 ②删除邮箱账号再重新添加

IT服务团队建设与管理

在 IT 服务团队中&#xff0c;需要明确各种角色。例如系统管理员负责服务器和网络设备的维护与管理&#xff1b;软件工程师专注于软件的开发、测试和维护&#xff1b;运维工程师则保障系统的稳定运行&#xff0c;包括监控、故障排除等。通过清晰地定义每个角色的职责&#xff0…

使用树莓派安装shairport-sync使老音响变身AirPlay音响

借助shairport-sync&#xff0c;可以让普通音响变成AirPlay无线音响&#xff0c;由于树莓派天生的低功耗&#xff0c;做这种事情最适合。所以架构就是树莓派安装Ubuntu24.04&#xff0c;在树莓派上安装shairport-sync&#xff0c;树莓派再通过3.5mm线连接音响。 安装Ubuntu24.…

全志T113双核异构处理器的使用基于Tina Linux5.0——RTOS系统定制开发

8、RTOS系统定制开发 此处以在rtos/components/aw目录下创建一个简单的软件包为例&#xff0c;帮助客户了解RTOS环境&#xff0c;为RTOS系统定制开发提供基础。 RTOS环境下的软件包主要由三部分组成&#xff0c;源文件&#xff0c;Makefile&#xff0c;Kconfig&#xff0c;如下…

用CAXA CAD电子图板导入图框、标题栏并导出pdf的方法

1.导入图框&#xff1a; 点击调入图框->出现读入图框文件 一个一个点击&#xff0c;选择合适的图框 然后点击导入 2.导入标题栏&#xff1a; 调入标题栏->出现读入标题栏文件 一个一个点击&#xff0c;选择合适的标题栏&#xff0c;然后点击导入 3.导出pdf&#x…

【Linux 篇】Docker 启动和停止的精准掌舵:操控指南

文章目录 【Linux 篇】Docker 启动和停止的精准掌舵&#xff1a;操控指南前言docker基本命令1. 帮助手册 2. 指令介绍 常用命令1. 查看镜像2. 搜索镜像3. 拉取镜像4. 删除镜像5. 从Docker Hub拉取 容器的相关命令1. 查看容器2. 创建与启动容器3. 查看镜像4. 启动容器5. 查看容…

Java---反射机制

JAVA反射机制是在运行状态中&#xff0c;对于任意一个类&#xff0c;都能够知道这个类的所有属性和方法&#xff1b;对于任意一个对象&#xff0c; 都能够调用它的任意方法和属性&#xff1b;这种动态获取信息以及动态调用对象方法的功能称为java语言的反射机制。 在编译后产生…

Mac配置maven环境及在IDEA中配置Maven

Mac配置maven环境及在IDEA中配置Maven 1. 介绍 Maven是一款广泛用于Java等JVM语言项目的工具&#xff0c;它以项目对象模型&#xff08;POM&#xff09;为基础进行项目管理&#xff0c;通过POM文件来定义项目信息和依赖关系。同时&#xff0c;它也是构建自动化工具&#xff0…

知乎日报——第二周

知乎日报——第二周 文章目录 知乎日报——第二周本周总结ModelViewController无限右滑预加载 总结 本周总结 本周主要完成了知乎日报的详情页面&#xff0c;实现了无限右滑和动态申请详情页的内容&#xff0c;实现了预先加载。以及通过位置获取相应的格外信息&#xff0c;使用…