vite项目怎么build打包成不同环境的代码?从而适配不同环境api接口

在开发 Web 应用的过程中,我们需要在不同的环境中运行和测试我们的应用程序(如开发环境、测试环境和生产环境)。每个环境都有其特定的 API 接口和配置。Vite,一个基于 ESBuild 的前端构建工具,可以帮助我们实现这个需求。

vite 配置官方文档:点击这里

其实 vite 打包的时候,主要是根据不同的环境来生成不同的打包文件的,所以不同的环境是怎么区分呢?这个在 vite 官方已经说明白了,那就是:模式

默认情况下,开发服务器 (dev 命令) 运行在 development (开发) 模式,而 build 命令则运行在 production (生产) 模式,也就是在 package.json 里面的命令:

 

这意味着当执行 vite build 时,它会自动加载 .env.production 中可能存在的环境变量: 

# .env.production
VITE_APP_TITLE=My App

在你的应用中,你可以使用 import.meta.env.VITE_APP_TITLE 渲染标题。

在某些情况下,若想在 vite build 时运行不同的模式来渲染不同的标题,你可以通过传递 --mode 选项标志来覆盖命令使用的默认模式。例如,如果你想在 staging (预发布)模式下构建应用:

vite build --mode staging

还需要新建一个 .env.staging 文件:

# .env.staging
VITE_APP_TITLE=My App (staging)

由于 vite build 默认运行生产模式构建,你也可以通过使用不同的模式和对应的 .env 文件配置来改变它,用以运行开发模式的构建:

# .env.testing
NODE_ENV=development

配置模式

所以我们可以在项目根目录添加一个.env.testing文件,然后配置一条 test 命令,用于将打包模式改为 testing 模式,这样就可以在执行 test 命令的时候,使用.env.testing文件中的环境变量:

这样,你的 Vite 项目就可以通过生产不同环境的代码进行打包,适合不同环境的 API 接口。 

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

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

相关文章

ganglia的安装使用

1.集群内分别安装epel-release依赖,更新yum源 sudo yum -y install epel-release 2.各节点上分别安装gmond sudo yum -y install ganglia-gmond 3.监控节点上安装gmetad和web(这里安装在node1上) sudo yum -y install ganglia-gmetad sudo yum -y insta…

现代密码学——消息认证和哈希函数

1.概述 1.加密-->被动攻击(获取消息内容、业务流分析) 消息认证和数字签名-->主动攻击(假冒、重放、篡改、业务拒绝) 2.消息认证作用: 验证消息源的真实性, 消息的完整性(未被篡改…

第七步 实现打印函数

文章目录 前言一、如何设计我们的打印函数?二、实践检验! 查看系列文章点这里: 操作系统真象还原 前言 现在接力棒意见交到内核手中啦,只不过我们的内核现在可谓是一穷二白啥都没有,为了让我们设计的内核能被看见被使用…

数据防泄露解决方案分享

在当今高度数字化和互联的商业环境中,数据防泄密已成为企业保护财产、维护客户隐私和遵守合规要求的重要一环。数据防泄密不仅关乎企业的经济利益,更涉及用户个人信息安全、商业机密保护以及国家安全等核心问题。能做好数据防泄露,对于提升企…

启动docker报错:Failed to listen on Docker Socket for the API.

说明: 1、安装部署docker完成后,启动docker报错:Failed to listen on Docker Socket for the API,如下图所示: 2、将SocketGroupdocker更改成:SocketGrouproot即可 一、解决方法: 1、执行命令…

舵机(结构,原理,控制方法)

介绍 舵机,全称为伺服马达(Servo Motor),是一种能够精确控制角度或位置的电动机。它广泛应用于模型制作、机器人技术、工业自动化等领域。舵机通过接收控制信号,将其转化为机械运动,从而实现精确的控制。 …

代码随想录算法训练营第三天| 203.移除链表元素、 707.设计链表、 206.反转链表

203.移除链表元素 题目链接: 203.移除链表元素 文档讲解:代码随想录 状态:没做出来,做题的时候定义了一个cur指针跳过了目标val遍历了一遍链表,实际上并没有删除该删的节点。 错误代码: public ListNode re…

文档解析新纪元:TextIn产品体验与解决难题的深度剖析

前言 在数字化浪潮席卷各行各业的今天,作为一名数据分析师,每天我都需要处理和分析大量的文档。然而,传统的文档解析工具在面对我的专业需求时,往往显得力不从心。 我的工作常常涉及到各种格式的文档,包括PDF、Word、…

在洁净实验室设计装修中怎么选择合适实验室家具?

在现代科学研究和技术开发中,洁净实验室装修设计成为了确保实验准确性和安全性的重要因素。洁净实验室需要提供一个无尘、无菌、受控的环境,而在洁净实验室装修设计这个过程中,如何选择合适的实验室家具就显得尤为重要,因为它直接…

Web前端一套全部清晰 ⑨ day5 CSS.4 标准流、浮动、Flex布局

我走我的路,有人拦也走,没人陪也走 —— 24.5.24 一、标准流 标准流也叫文档流,指的是标签在页面中默认的排布规则,例如:块元素独占一行,行内元素可以一行显示多个。 二、浮动 作用: 让块级元素水平排列。 属性名:floa…

练习题(2024/5/22)

1N 皇后 II n 皇后问题 研究的是如何将 n 个皇后放置在 n n 的棋盘上,并且使皇后彼此之间不能相互攻击。 给你一个整数 n ,返回 n 皇后问题 不同的解决方案的数量。 示例 1: 输入:n 4 输出:2 解释:如上…

民国漫画杂志《时代漫画》第18期.PDF

时代漫画18.PDF: https://url03.ctfile.com/f/1779803-1248612707-27e56b?p9586 (访问密码: 9586) 《时代漫画》的杂志在1934年诞生了,截止1937年6月战争来临被迫停刊共发行了39期。 ps:资源来源网络!

春秋CVE-2022-23906

简介 CMS Made Simple v2.2.15 被发现包含通过上传图片功能的远程命令执行 (RCE) 漏洞。此漏洞通过精心制作的图像文件被利用。 正文 1.进入靶场2.进入登录界面,弱口令admin/123456 3.进入后台,文件上传点 4.上传一句话木马图片 5.复制图片&#xf…

细胞冻存——让你的细胞“长生不老”

《星际穿越》电影中提到漫长的太空旅程中,宇航员可以进入休眠水床休眠,并自行设定唤醒时间。在《异形》《深空失忆》《三体》等科幻作品中,都出现此类技术。《三体》中,休眠后来成为人类最普遍的一项技术。技术上的人类低温休眠&a…

OpenCV:入门(五)

图像梯度 图像梯度计算的是图像变化的速度。对于图像的边缘部分,其灰度值变化较大,梯度值也 较大;相反,对于图像中比较平滑的部分,其灰度值变化较小,相应的梯度值也较小。一般情 况下,图像梯度计…

中文信息期刊投稿邮箱

《中文信息》杂志是国家新闻出版总署批准的国家级刊物(月刊),国内外公开发行,大十六开印刷。本刊主要反映我国中文信息处理的学术水平,重点刊登科技、经济、教育等领域的基础理论、科研与应用技术的学术论文&#xff0…

第2天 搭建安全拓展_小迪网络安全笔记

1.常见搭建平台脚本使用: 例如 phpstudy IIS Nginx(俗称中间件): 什么是中间件: 中间件是介于应用系统和系统软件之间的一类软件,它使用系统软件所提供的基础服务(功能),衔接网络上应用系统的各个部分或不同的应用&#…

vue2引入brand.vue和brand-add-or-update.vue后重启项目报错解决方案

最近在用粒谷商城项目练手,学习到P59时引入品牌两个vue文件,重启(npm run dev)项目报错: ERROR Failed to compile with 2 errors 12:11:59Th…

【论文阅读】Rank-DETR(NIPS‘23)

paper:https://arxiv.org/abs/2310.08854 code:https://github.com/LeapLabTHU/Rank-DETR

微信小程序视频怎么保存到本地

你是否遇到过在微信小程序中发现了精彩的视频,却不知道如何将其保存到本地的困扰?别担心,这篇文章将为您揭示2024年最新的保存方法,让您轻松下载和保留这些珍贵的视频内容。不管您是使用安卓设备还是苹果设备,我们都为…