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

ops/2024/11/25 18:36:38/

在 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.ppmy.cn/ops/136639.html

相关文章

[ubuntu]编译共享内存读取出现read.c:(.text+0x1a): undefined reference to `shm_open‘问题解决方案

问题log /tmp/ccByifPx.o: In function main: read.c:(.text0x1a): undefined reference to shm_open read.c:(.text0xd9): undefined reference to shm_unlink collect2: error: ld returned 1 exit status 程序代码 #include <stdio.h> #include <stdlib.h> #…

在ubuntu中查看csv

在 Ubuntu 中查看 CSV 文件的内容有多种方法。以下是一些常用的方法&#xff1a; 使用命令行工具 cat 命令 如果文件不大&#xff0c;可以使用 cat 命令快速查看文件内容&#xff1a; cat 10_11_query.csvless 命令 对于较大的文件&#xff0c;less 是一个更好的选择&#xf…

python中lxml 库之 etree 使用详解

目录 一、 etree 介绍二、xpath 解析 html/xml1、第一步就是使用 etree 连接 html/xml 代码/文件。2、 xpath 表达式定位① xpath结合属性定位② xpath文本定位及获取③ xpath层级定位④ xpath索引定位⑤ xpath模糊匹配 一、 etree 介绍 lxml 库是 Python 中一个强大的 XML 处…

【华为云函数工作流】python的函数中如何获取请求链接中带的参数

背景 通过调用函数的url&#xff0c;将参数传递给函数执行&#xff0c;函数里如何获取这个参数 过程 下一个简单的demo如下 参考这个链接https://support.huaweicloud.com/devg-functiongraph/functiongraph_02_0420.html写一个demo&#xff0c;这个是百度视频云获取token的…

SpringBoot集成多个rabbitmq

1、pom文件 <!-- https://mvnrepository.com/artifact/org.springframework.boot/spring-boot-starter-amqp --> <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-amqp</artifactId><versio…

鸿蒙网络编程系列50-仓颉版TCP回声服务器示例

1. TCP服务端简介 TCP服务端是基于TCP协议构建的一种网络服务模式&#xff0c;它为HTTP&#xff08;超文本传输协议&#xff09;、SMTP&#xff08;简单邮件传输协议&#xff09;等高层协议的应用程序提供了可靠的底层支持。在TCP服务端中&#xff0c;服务器启动后会监听一个或…

C语言:深入理解指针

一.内存和地址 我们知道计算机上CPU&#xff08;中央处理器&#xff09;在处理数据的时候&#xff0c;需要的数据是在内存中读取的&#xff0c;处理后的数据也会放回内存中&#xff0c;那我们买电脑的时候&#xff0c;电脑上内存是 8GB/16GB/32GB 等&#xff0c;那这些内存空间…

深度学习:神经网络中线性层的使用

深度学习&#xff1a;神经网络中线性层的使用 在神经网络中&#xff0c;线性层&#xff08;也称为全连接层或密集层&#xff09;是基础组件之一&#xff0c;用于执行输入数据的线性变换。通过这种变换&#xff0c;线性层可以重新组合输入数据的特征&#xff0c;并将其映射到新…