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

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

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


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


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

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

image.png


这意味着当执行 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文件中的环境变量: image.png 这样,你的 Vite 项目就可以通过生产不同环境的代码进行打包,适合不同环境的 API 接口。


目录
相关文章
|
6月前
|
算法 API 数据安全/隐私保护
电商 API 双平台实战:淘宝 item.get + 京东 item_detail 对接指南(附可复用代码 + 问题排查)
本文详细解析了淘宝和京东双平台API对接的核心流程,涵盖资质申请、凭证获取、签名生成、高频接口调用及常见问题解决方案,助力开发者高效实现商品数据同步与管理。
|
6月前
|
数据采集 缓存 API
1688 API 实战指南:搞定批发场景的 3 大核心难题(附签名代码与避坑清单)
本文深入解析了1688 API 在批发场景下的三大核心难题及解决方案,涵盖签名机制、商品数据处理与订单同步等高频问题,提供可复用代码与避坑清单,助你高效对接1688平台。
|
8月前
|
边缘计算 监控 Java
跨境电商 API 对接避坑指南:亚马逊 SP-API 超时问题的 5 种解决方案(附重试代码模板)
在对接亚马逊 SP-API 时,超时问题常导致订单延迟、库存失败,影响运营。本文总结某 3C 品牌实战经验,详解超时的 3 大根源与 5 大解决方案,涵盖动态超时、重试机制、请求拆分、并发控制与边缘加速,并附可复用 Python 代码,助你将超时率从 20% 降至 1% 以下。
|
8月前
|
安全 API 数据安全/隐私保护
低代码革命:API无代码集成如何让企业“3天上线一个生态”?
在数字化转型浪潮中,API成为释放数据价值、提升企业效率的核心。本文详解API架构设计、安全实践与跨平台集成,为CTO提供效率提升指南,涵盖微服务、安全认证、协议选择、低代码集成及未来趋势,助力企业构建敏捷、安全、高效的数字生态。
|
6月前
|
存储 监控 前端开发
淘宝商品详情 API 实战:5 大策略提升店铺转化率(附签名优化代码 + 避坑指南)
本文深入解析淘宝商品详情API的核心字段与实战应用,分享如何通过动态定价、库存预警、差评控制等5大策略提升电商转化率。结合300+店铺实战经验,提供优化代码与避坑指南,助力开发者与运营者实现数据驱动的精细化运营。
|
8月前
|
缓存 算法 API
从 0 实现 API 接口签名验证系统:基于 HMAC-SHA256 的防篡改方案(附 Python 全代码)
本文介绍基于 的 API 接口签名验证系统,实现防篡改与防重放攻击,包含完整设计原理、签名生成规则及可运行的 Python 客户端与服务端代码,并提供安全性优化与部署建议。
|
8月前
|
人工智能 供应链 物联网
效率提升300%:开放银行API驱动电商分账系统的“零代码”革命
在数字经济背景下,开放银行API与电商生态深度融合,推动支付清算与分账系统从封闭走向开放。通过技术解耦与系统重构,实现资金流、信息流与业务流的高效协同,提升支付效率与分账灵活性,助力电商场景创新。本文从技术驱动力、重构路径、实践案例与未来趋势四方面,解析这一变革的核心逻辑与落地价值。
|
5月前
|
缓存 监控 前端开发
顺企网 API 开发实战:搜索 / 详情接口从 0 到 1 落地(附 Elasticsearch 优化 + 错误速查)
企业API开发常陷参数、缓存、错误处理三大坑?本指南拆解顺企网双接口全流程,涵盖搜索优化、签名验证、限流应对,附可复用代码与错误速查表,助你2小时高效搞定开发,提升响应速度与稳定性。
|
5月前
|
JSON 算法 API
Python采集淘宝商品评论API接口及JSON数据返回全程指南
Python采集淘宝商品评论API接口及JSON数据返回全程指南
|
6月前
|
数据可视化 测试技术 API
从接口性能到稳定性:这些API调试工具,让你的开发过程事半功倍
在软件开发中,接口调试与测试对接口性能、稳定性、准确性及团队协作至关重要。随着开发节奏加快,传统方式已难满足需求,专业API工具成为首选。本文介绍了Apifox、Postman、YApi、SoapUI、JMeter、Swagger等主流工具,对比其功能与适用场景,并推荐Apifox作为集成度高、支持中文、可视化强的一体化解决方案,助力提升API开发与测试效率。