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

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

相关文章:

  • Springboot项目添加拦截器
  • 基于YOLOv8深度学习的人体姿态摔倒检测与语音报警系统(PyQt5界面+数据集+训练代码)
  • Elasticsearch客户端在和集群连接时,如何选择特定的节点执行请求的?
  • HarmonyOS:使用ArkWeb构建页面
  • UVM 验证方法学之interface学习系列文章(七)高级 《bind 操作》(4)级联
  • Python中Tushare(金融数据库)入门详解
  • Spring Boot OA:企业办公自动化的高效路径
  • 设计模式——组合实体模式
  • 7-366 解救小鱼干
  • 大数据背景下的数据质量挑战与解决方案
  • 【数据分享】2024年我国省市县三级的住宿服务设施数量(8类住宿设施/Excel/Shp格式)
  • PostgreSQL的内存结构
  • Unity 使用 ExcelDataReader 读取Excel表
  • Ubuntu,openEuler,MySql安装
  • 力扣797. 所有可能的路径
  • 什么是Webpack,有什么特点
  • 基于FPGA(现场可编程门阵列)的SD NAND图片显示系统是一个复杂的项目,它涉及硬件设计、FPGA编程、SD卡接口、NAND闪存控制以及图像显示等多个方面
  • 【LeetCode】每日一题 2024_11_21 矩阵中的蛇(模拟)
  • 【机器学习】超简明Python基础教程
  • 数据抓取与存储:将网络爬虫数据保存到数据库的详细指南
  • 缓存大key如何解决
  • 基于Java Springboot餐饮美食分享平台
  • 【隐私计算大模型】联邦深度学习之拆分学习Split learning原理及安全风险、应对措施以及在大模型联合训练中的应用案例
  • BLIP-2模型的详解与思考
  • Docker+PostgreSQL数据库
  • java: itext8.05 create pdf