vue3+vite配置环境变量

1、创建环境变量文件:首先在vue3项目根目录创建.env.development 和 .env.prodution两个文件,分别为开发和生产环境(必须.env.开头,需要额外环境,配置自定义的文件名称即可)
在这里插入图片描述

2、在环境变量文件分别写对应环境变量,注意变量必须要VITE_开头
在这里插入图片描述
在这里插入图片描述

3、开发环境配置和访问环境变量
3.1 访问环境变量前,需要在package.json 的dev中配置mode(生产环境不需要配置,生产打包默认是生产模式),如下:
在这里插入图片描述

3.2 在.vue页面或者入口文件main.ts访问环境变量,使用import.meta.env
在这里插入图片描述
启动本地环境,访问对应页面时,会打印以下信息,包含自定义的环境变量
在这里插入图片描述
3.3 在vite.config.ts中访问环境变量:使用vite的loadEnv插件,需要将vite配置包裹在一个函数中,使用结构将当前mode模式拿到,如下所示:
在这里插入图片描述
4、在生产环境访问环境变量
4.1 打包项目,执行npm run build,生成了dist文件夹;
4.2 需要全局安装插件,npm install http-server -g,在dist文件夹打开终端,输入http-server -p 9091,即可启动一个服务查看打包后的项目,如下图所示:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

Android内存优化项目经验分享 兼顾效率与性能

背景 项目上线一段时间后,回顾重要页面 保证更好用户体验及生产效率,做了内存优化和下载导出优化,具体效果如最后的一节的表格所示。 下面针对拍摄流程的两个页面 预览页 导出页优化实例进行介绍: 一.拍摄前预览页面优化 预览效果问题 存在…

试试前端自动化测试(基础篇)

众所周知的原因,前端作为一种特殊的 GUI 软件,做自动化测试困难重重。在快速迭代,UI 变动大的业务中,自动化测试想要落地更是男上加男 🐶。 近期的学习过程中,翻阅了众多前端自动化测试相关的文章&#xf…

【3D reconstruction 学习笔记】

三维重建 3D reconstruction 1. 相机几何针孔相机摄像机几何 2. 相机标定线性方程组的解齐次线性方程组的解非线性方程组的最小二乘解透镜相机标定带畸变的相机标定 3. 单视图重建2D平面上的变换3D空间上的变换单视测量无穷远点 无穷远线 无穷远平面影消点 影消线单视重构 4. 三…

天艺制盖邀您参观2024第七届世界燕窝及天然滋补品博览会

2024第七届世界燕窝及天然滋补品博览会 2024年8月7-9日| 上海新国际博览中心 上海燕博会 世界燕窝及天然滋补品展览会暨世界滋补产业生态发展大会(简称上海燕博会),2017年创办于中国上海,是一年一度的世界燕窝滋补品行业盛会。…

运放PSRR与开关电源纹波分析的实际案例分享!

本文来自看海原创视频教程:《运放秘籍》运算放大器基础精讲及应用第一部*开天 微信公众号:工程师看海 【淘宝】https://m.tb.cn/h.5PAjLi7?tkvmMLW43KO7q CZ3457 「运放秘籍_运算放大器Multisim仿真视频教程第一部开天_工程师看海」 点击链接直接打开 …

k8s入门到实战(一)—— kubernetes概述

k8s 概述 k8s github地址:https://github.com/kubernetes/kubernetes 官方文档:https://kubernetes.io/zh-cn/docs/home/ k8s,全程是 kubernetes,这个名字源于希腊语,意为"舵手"或"飞行员” k8s 这…

启动性能优化

一、应用启动慢的原因 1.在主线程执行了太多耗时的操作,比如加载数据,或者初始化三方库等等,导致在Application的oncreate或者Activity的oncreate方法中耗时太久 2.布局嵌套太深,或者一些不会立即使用的布局也在一开始一起加载到…

Offlian RL: Weighted Policy Constraints for Offline Reinforcement Learning

AAAI 2023 paper Intro 分布偏移导致离线RL对于OOD数据存在过估计问题。因此一些方法限制策略靠近行为策略。但是着很大程度受限于数据集的质量。若是数据集存在非专家,一个自然的问题是是否有可能构建一个更合理的策略约束方法,该方法通过识别数据集中…

SpringBoot 3整合Elasticsearch 8

这里写自定义目录标题 版本说明spring boot POM依赖application.yml配置新建模型映射Repository简单测试完整项目文件目录结构windows下elasticsearch安装配置 版本说明 官网说明 本文使用最新的版本 springboot: 3.2.3 spring-data elasticsearch: 5.2.3 elasticsearch: 8.1…

2024年软件测试岗现状?“我“进阶了测试开发,一路狂飙...

目录:导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结(尾部小惊喜) 前言 1、测试工程师的现…

SM2098EHD:巴西双电压球泡灯应用

巴西使用的双电压系统主要包括127V和240V。这种双电压系统是为了适应不同的电器设备和需求。在巴西,有些电器设备可能需要127V的电压,而有些则可能需要240V的电压。 因此,如果你在巴西使用电器设备,需要确保设备能够适应巴西的双…

【数据结构】绪论

文章目录 开篇:数据结构的学习之路1、开篇_数据结构在学什么2、数据结构的基本概念数据数据元素、数据项数据结构、数据对象数据类型、抽象数据类型数据结构的三要素逻辑结构数据的物理结构(存储结构)数据的运算 最后总结内容 3、算法的基本概…

Linux 理解文件系统、磁盘结构、软硬链接

目录 一、理解磁盘结构 1、磁盘的物理结构 2、硬件层面理解 3、磁盘的具体物理存储结构 4、进行逻辑抽象 5、磁盘文件的管理 6、创建新文件的过程 二、理解文件系统 1、文件的构成 2、为何选择4KB而非512字节作为基本单位? 3、文件系统的组成 数据块(Data Blocks&a…

图像抠图DIS——自然图像中高精度二分图像抠图的方法(C++/python模型推理)

概述 DIS(Dichotomous Image Segmentation)是一种新的图像分割任务,旨在从自然图像中分割出高精度的物体。与传统的图像分割任务相比,DIS更侧重于具有单个或几个目标的图像,因此可以提供更丰富准确的细节。 为了研究…

Ubuntu20.04上,VTK9.3在QT5上的环境配置与开发测试

Ubuntu20.04上,VTK9.3在QT5上的环境配置与开发测试 1 背景介绍2 VTK9.3的编译安装2.1 安装ccmake 和 VTK 的依赖项:2.2 建立VTK编译文件夹并下载2.3 cmake配置VTK9.3的编译环境2.4 make编译安装VTK9.32.5 测试VTK安装是否成功 3 基于qmake的QT5的VTK9.3开…

异地共享文件如何设置?

在当今数字化时代,异地办公已成为常态,越来越多的企业和个人需要在不同地区间进行文件共享与访问。为了解决复杂网络环境下的远程连接问题,北京金万维科技有限公司推出了一款名为【天联】的异地组网内网穿透产品。 【天联】组网是一款由北京金…

python基础——语句

一、条件语句 就是 if else 语句 ! 代表不等于 代表等于if 关键字,判断语句,有“如果”的意思,后面跟上判断语句else 常和“if” 连用,有“否则”的意思,后面直接跟上冒号 …

qt学习第三天,qt设计师的第一个简单案例

3月25,应用qt设计师,手动设计界面形状 ​ 如何启动qt设计师,找到对应的安装地点,对应你自己安装的pyside6或其他qt的安装路径来找 ​ 应用qt设计师的优点是不用敲代码然后慢慢调节框框大小,位置等、可以直接修改…

TTS通用播放库技术设计

TTS音频播放库技术设计 目录介绍 01.整体介绍概述 1.1 项目背景介绍1.2 遇到问题1.3 基础概念介绍1.4 设计目标1.5 问题答疑和思考 02.技术调研说明 2.1 语音播放方案2.2 TTS技术分析2.3 语音合成技术2.4 方案选择说明2.5 方案设计思路2.6 文本生成音频 03.系统TTS使用实践 3…

JavaEE企业开发新技术4

2.16 模拟Spring IOC容器功能-1 2.17 模拟Spring IOC容器功能-2 什么是IOC? 控制反转,把对象创建和对象之间的调用过程交给Spring框架进行管理使用IOC的目的:为了耦合度降低 解释: 模仿 IOC容器的功能,我们利用 Map…