Vite 项目中环境变量的配置和使用

Vite 项目中环境变量的声明

我们要在 Vite 项目中进行环境变量的声明,那么需要在项目的根目录下,新建 .env.[mode] 文件用于声明环境变量,如:

  • .env.test 文件用于测试环境下项目全局变量的声明
  • .env.dev 文件用于开发环境下项目全局变量的声明
  • .env.prod 文件用于生产环境下项目全局变量的声明

其中 mode 是在 vite 启动项目时使用的环境模式名称。
需要注意的是,我们在 .env.[mode] 文件中声明的环境变量需要以 VITE_ 开头

# 环境
VITE_ENV = 'dev'# 服务端 IP
VITE_SERVER_HOST = "127.0.0.1"
# 服务端服务程序端口号
VITE_SERVER_PORT = 8080# ...

启动运行项目并指定环境模式

我们在 package.json 中启动运行项目的脚本命令中,可以使用 --mode 参数指定我们要使用的环境模式,环境模式名称即 .env.[mode] 文件名中的 mode,如:
image.png

  "scripts": {"dev": "vite --open --mode=dev","test": "vite --open --mode=test","build": "vue-tsc && vite build --mode=prod","preview": "vite preview --open"},

然后,我们执行相应的脚本命令就会会启用相应的环境变量文件。

在 js/ts 文件中使用环境变量

在 js/ts 文件中通过 import.meta.env.环境变量名 获取相应环境变量的值

const env: string = import.meta.env.VITE_ENV
console.log(`当前的环境为 ${env}`)

image.png

在 html 文件中使用环境变量

在 html 文件中通过 %环境变量名% 获取相应环境变量的值

在标签体中使用

  <body><h1>当前的环境为 %VITE_ENV%</h1></body>

image.png

在标签属性中使用

<body><img src="asdasda" alt="当前的环境为 %VITE_ENV%"><div id="app"></div><script type="module" src="/src/main.ts"></script>
</body>

image.png

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

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

相关文章

Scikit-Learn K均值聚类

Scikit-Learn K均值聚类 1、K均值聚类1.1、K均值聚类及原理1.2、K均值聚类的优缺点1.3、聚类与分类的区别2、Scikit-Learn K均值聚类2.1、Scikit-Learn K均值聚类API2.2、K均值聚类初体验2.3、K均值聚类案例1、K均值聚类 K-均值(K-Means)是一种聚类算法,属于无监督学习。K-M…

OpenFOAM学习笔记

OpenFOAM 计算流体力学&#xff1a;用计算机求解流体控制方程&#xff0c;来模拟真实情况下&#xff0c;流体的流动状态OpenFOAM的离散方法&#xff1a;有限体积法&#xff0c;将整个空间划分成若干个控制体OpenFOAM使用的网格系统&#xff1a;同位网格&#xff08;Collocated…

nvm保姆级安装使用教程

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; 开发环境篇 ✨特色专栏&#xff1a; M…

python相机校准

文章目录 张正友标定法角点检测标定去畸变 张正友标定法 相片是三维世界在二维平面上的投射&#xff0c;故而其深度信息是损失掉了的。但是&#xff0c;如果把拍照看作理想的小孔成像过程&#xff0c;那么相片中的每个像素&#xff0c;都将通过一个锥体与世界中真实的点一一对…

MongoDB聚合运算符:$median

文章目录 语法参数字段使用类型操作计算注意事项数组处理窗口函数 举例$median作为累加器在 p r o j e c t 阶段使用 project阶段使用 project阶段使用median在$setWindowField阶段使用$median $median聚合运算符以标量值返回中位数的近似值&#xff0c;即第50百分位数。$media…

常见的常见免费开源绘图工具对比 draw.io/Excalidraw/Lucidchart/yEd Graph Editor/Dia/

拓展阅读 常见免费开源绘图工具 OmniGraffle 创建精确、美观图形的工具 UML-架构图入门介绍 starUML UML 绘制工具 starUML 入门介绍 PlantUML 是绘制 uml 的一个开源项目 UML 等常见图绘制工具 绘图工具 draw.io / diagrams.net 免费在线图表编辑器 绘图工具 excalidr…

spa、vue、elementUi

spa (single page application). 动态重写当前页面而非从服务器重新加载整个新页面。使应用程序更像一个桌面应用程序。所有的html、javascript、css通过单个页面检索加载资源。前端页面使用ajax与后端通信。一个项目只有一个html页面。所有的页面跳转都通过路由导航。 vue可用…

【OpenCV进阶】图像中添加中文字幕

OpenCV中的putText函数可以在图像上添加一些你想要的信息&#xff0c;但是该函数只能添加英文字母或数字&#xff0c;无法添加中文字幕。函数原型如下&#xff1a; CV_EXPORTS_W void putText( InputOutputArray img, const String& text, Point org,int fontFace, double…

XSS分类

简介 XSS全称为Cross Site Scripting&#xff0c;为了和CSS分开简写为XSS&#xff0c;中文名为跨站脚本。该漏洞发生在用户端&#xff0c;是指在渲染过程中发生了不在预期过程中的JavaScript代码执行。XSS通常被用于获取Cookie、以受攻击者的身份进行操作等行为。 反射型XSS …

云数据库AWS Aurora(一)

背景 Amazon Aurora 是Amazon Web Services (AWS) 提供的一种关系数据库服务&#xff0c;它兼容并提供与MySQL和PostgreSQL相同的API。Aurora设计为云环境中的商业数据库&#xff0c;具备高性能、高可用性、低成本等特性。 AWS一些组件定义 首先介绍下AWS一些组件。 EC2&am…

Swift:在 Win10 上编程入门

访问 https://swift.org/download/ 找到 Windows 10&#xff1a;x86_64 下载 swift-5.10-RELEASE-windows10.exe 大约490MB 建议安装在 D:\Swift\ &#xff0c;安装后大约占2.56GB 官网文档&#xff1a;https://www.swift.org/documentation/ 中文教程&#xff1a;The swift…

C++之双向链表与哈希链表用法区别实例(二百六十八)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

Unity常用性能优化

DrawCall&#xff1a;CPU向GPU发送渲染命令的过程。 批次&#xff1a;批次是指在一次渲染帧中提交的DrawCall数量。 合批&#xff1a;即批量渲染&#xff0c;合批是一种优化技术&#xff0c;通过将多个需要渲染的物体合并为一个或少数几个DrawCall。 静态合批&#xff1a;对…

Streamlit 构建大语言模型 (LLM) web 界面

文章目录 Streamlit 构建大语言模型 (LLM) web 界面选择Streamlit的原因原理流程streamlit布局示例代码聊天机器人示例代码&#xff08;简化版&#xff09; Streamlit在ChatGLM3-6B中的应用 Streamlit 构建大语言模型 (LLM) web 界面 选择Streamlit的原因 易用性&#xff1a;S…

Cisco Unified Communications Manager (CallManager) 15.0 SU1 - 统一通信与协作

Cisco Unified Communications Manager (CallManager) 15.0 SU1 - 统一通信与协作 思科统一通信管理器 (CallManager) 请访问原文链接&#xff1a;https://sysin.org/blog/cisco-ucm-15/&#xff0c;查看最新版。原创作品&#xff0c;转载请保留出处。 作者主页&#xff1a;…

基于开源软件构建存储解决方案的思考

近来看了一些IBM的存储产品的资料&#xff0c;有一些收获。 依据存储软件和搭配硬件&#xff0c;IBM存储产品的组合&#xff0c;大致分类如下&#xff1a; 自研存储软件&#xff0c;搭配自研专有硬件自研存储软件&#xff0c;搭配通用服务器硬件&#xff0c;比如IBM Storage S…

需求分析及设计定义

背景 经过不断的折腾&#xff0c;一切过程都是为了呈现输出&#xff0c;这个阶段就是要交付需求和方案的环节了&#xff0c;很多失败的项目就是上来就到这个环节&#xff0c;倒着捣鼓&#xff0c;先写个文档&#xff0c;做个原型&#xff0c;甚至提出方案&#xff0c;然后再和…

Redis 未授权访问漏洞

出现以下函数 eval函数&#xff1a;因为脚本内容必须通过eval来执行 2.luaopen_io函数&#xff1a;因为此攻击必须通过执行luaopen_io函数来获取 io库 3、.popen函数&#xff1a;恶意命令必须通过io库中的popen函数来执行&#xff0c;为什么拦截规则不是io.popen&#xff0…

状态优先级

文章目录 状态优先级1. 进程状态1.1 进程状态查看1.2 僵尸进程1.3 孤儿进程 2.进程优先级2.1 基本概念2.2 查看系统进程2.3 PRI and NI2.4 PRI vs NI 3. 查看进程优先级的命令3.1 top命令更改nice3.2 其他概念 状态优先级 1. 进程状态 看看Linux内核源代码怎么说 为了弄明白…

深入浅出 -- 系统架构之分布式系统底层的一致性

在分布式领域里&#xff0c;一致性成为了炙手可热的名词&#xff0c;缓存、数据库、消息中间件、文件系统、业务系统……&#xff0c;各类分布式场景中都有它的身影&#xff0c;因此&#xff0c;想要更好的理解分布式系统&#xff0c;必须要理解“一致性”这个概念。 其实关于…