vue2+webpack 和 vite+vue3 配置获取环境变量(补充)

  • 相关涉及知识点可看小编该文章:

nginx: 部署前端项目的详细步骤(vue项目build打包+nginx部署)_前端工程打包部署到nginx-CSDN博客

1.vue2+webpack

我们通常会在项目中看到这么两个文件(没有则自己创建,文件名:.env.***) ,一个是生产环境,一个是测试环境。

  • 然后可以通过下面的方法在页面中获取响应的环境变量,并后续做判断:
process.env.*** // 用法
//例如
process.env.NODE_ENV
process.env.VUE_APP_DES
process.env.VUE_APP_KEY
……
  • 两个文件的内容:

  • 通常放的都是对应环境的环境变量
  • 注意写法:VUE_***

2.vite+vue3

  • 配置内容和webpack+vue2差不多;
  • 注意:
  1. 就是配置文件中的变量不能随便命名,必须以VITE_开头
  2. 就是获取的方式使用:import.meta.env.VITE_***可以输出对应的值
  • 获取方式:

import.meta.env.VITE_ENV
import.meta.env.VITE_DES
……

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

WITS核心价值观【创新】篇|从财务中来,到业务中去

「客尊」、「诚信」、「创新」 与「卓越」 是纬创软件的核心价值观。我们秉持诚信态度,致力于成为客户长期且值得信赖的合作伙伴。持续提升服务厚度,透过数字创新实践多市场的跨境交付,助客户保持市场领先地位。以追求卓越的不懈精神&#xf…

C++项目实践学习笔记---DLL

linux守护进程 守护进程或精灵进程(Daemon):以后台服务方式运行的进程,它们不占用终端(Shell),因此不会受终端输入或其他信号(如中断信号)的干扰守护进程有如下特点。 &…

如何做好新闻软文宣发媒体资源筛选?

传媒如春雨,润物细无声,大家好,我是51媒体网胡老师。 媒体宣传加速季,100万补贴享不停,一手媒体资源,全国100城线下落地执行。详情请联系胡老师。 新闻软文宣发是指企业通过创造或利用新闻事件&#xff0c…

【JAVA多线程】JMM,成体系聊一下JAVA线程安全问题

目录 1.什么是JMM 2.现代计算机架构 3.线程安全理论 3.1.造成线程安全问题的原因 3.1.1.内存不可见 3.1.2.重排序 3.2.解决思路 3.2.1.as-if-serial 3.2.2.happen-before 4.线程安全实现 4.1.Synchronized 4.2.volatile 1.什么是JMM JMM,全称为Java Me…

胶质瘤的发病原因及诊断方式有哪些?

胶质瘤,这个听起来有些陌生的名词,实际上是一种起源于神经胶质细胞的常见脑肿瘤。它的发病原因复杂,涉及遗传、环境、年龄及感染等多种因素。 首先,遗传因素在胶质瘤的发病中占据一席之地。某些遗传性疾病,如结节性硬化…

【代码阅读】SSC:Semantic Scan Context for Large-Scale Place Recognition

一、主函数 官方开源的代码提供了四个主函数,其中eval_pair.cpp和eval_top1.cpp是一组,分别用于计算两帧的相似度分数以及一帧点云在所有的51帧点云中相似度最高的25帧的相似度分数。eval_seq.cpp是在eval_top1.cpp的基础上,给了一堆序列&am…

【Java Web】会话管理

目录 一、为什么需要会话管理? 二、会话管理机制 三、Cookie概述 四、HttpSession概述 4.1 HttpSession时效性 一、为什么需要会话管理? HTTP协议在设计之初就是无状态的,所谓无状态就是在浏览器和服务器之间的通信过程中,服务器并…

简过网:上万元的学费,考公到底要不要报个培训班?

考公报不报班一直是很多朋友比较纠结一件事,报班了学费太贵,不报班又怕考不上,如果你也有这种困扰,那么,不妨看看这篇文章! 首先,对于报班VS自学这个问题,小编的建议是:…

LICEcap-开源GIF 屏幕录制工具

LICEcap-开源GIF 屏幕录制工具 开源GIF 屏幕录制工具 下载可以访问:https://www.cockos.com/licecap/ 点击Record,开始录制 点击Stop,停止录制 点击Record,进入该页面 display in animation(在动画中显示) …

240627_昇思学习打卡-Day9-ResNet50图像分类

240627_昇思学习打卡-Day9-ResNet50图像分类 文章目录 240627_昇思学习打卡-Day9-ResNet50图像分类前言残差网络Residual Block代码实现Bottleneck Block代码实现 BN层(Batch Normalization)构建ResNet50网络数据集准备与加载模型训练与评估可视化模型预…

高德.js2.0绘制点聚合,并点击点出现自定义样式弹窗

我这里依旧使用AMapLoader插件 代码如下 // 初始化高德地图initMap() {AMapLoader.load({key: "fb35c92d4019cfafeca876fd5514bb47", //key值是key值 和安全密钥不同version: "2.0", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15plugins…

免费恢复微信好友的聊天记录(已删除的好友不能恢复)

非常简单,适用于未删除的微信好友的聊天记录恢复,支持导出 1、下载楼月微信聊天记录导出恢复助手 - 导出手机微信聊天记录 2、官方原文教程链接:官方原文教程链接https://www.louyue.com/weixin.htm

华为升腾显卡选型备忘

目录 1. 开发套件 2. 加速模块 3. 加速卡 4. 训练卡 官方地址:https://www.hiascend.com/ 备注: (1)V后缀的都是Video视频解析卡,本质是推理卡; (2)I后缀的都是推理卡&#…

如何通过小猪APP分发轻松实现应用内测分发

搞应用开发的朋友们,都知道内测分发这个环节有多重要。没有内测,一款应用基本上是不可能上线的。毕竟,谁也不想自己的产品在上线的那一刻就被用户吐槽得体无完肤。内测分发的好坏,直接影响到应用的质量和用户的第一印象。如何才能…

postGreSQL关系数据库介绍

什么是postGreSQL关系数据库? PostgreSQL 是一个强大的、开源的对象关系型数据库管理系统(ORDBMS)。它基于POSTQUEL查询语言的继承,提供了对SQL标准的广泛支持,并扩展了许多高级功能,如事务处理、多版本并…

使用Python实现深度学习模型通常涉及以下几个步骤

学习总结 1、掌握 JAVA入门到进阶知识(持续写作中……) 2、学会Oracle数据库入门到入土用法(创作中……) 3、手把手教你开发炫酷的vbs脚本制作(完善中……) 4、牛逼哄哄的 IDEA编程利器技巧(编写中……) 5、面经吐血整理的 面试技…

光电液位传感器工作时容易受哪些因素影响?

光电式水位传感器的检测液位时是必须要接触液体才能进行检测的。当液体覆盖光电式水位传感器的探头时,传感器内的发光二极管发射出去的光线会折射在液体中,而光敏接收器只能接收到少量光电或者接收不到光线。反之正常接收光线则是无水状态。 光电式水位…

想买骨传导耳机怕踩雷?全方位的选购攻略分享给你!

作为一个爱好运动的人来说,现在天气越来越暖和了,很多人选择外出徒步、越野或者骑行。在运动过程中都会佩戴一些入耳式耳机,但是运动一段时间发现入耳式耳机带久了耳朵会很不舒服,而且出汗了的话对于一些不防水的入耳式耳机的话&a…

swiper轮播 loop:true失效解决

数据是写死的时候,能够loop:true是有效的;数据是动态获取的loop:true就会失效。 方法一:在接收到数据后,使用 setTimeout(() > {this.getSwiper(); //生成swiper方法}, 0); 下面是我项目具体使用的参考例子: 方法二&#xff…

详细解释Spring事务的传播机制

详细解释Spring事务的传播机制 Spring框架中,事务传播机制是指在一个事务方法调用另一个事务方法时,Spring如何管理这些方法之间的事务边界。Spring提供了七种事务传播行为,以满足不同的业务需求。下面将详细解释每种传播行为及其适用场景&a…