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 接口。


相关文章
|
12天前
|
人工智能 自然语言处理 API
Multimodal Live API:谷歌推出新的 AI 接口,支持多模态交互和低延迟实时互动
谷歌推出的Multimodal Live API是一个支持多模态交互、低延迟实时互动的AI接口,能够处理文本、音频和视频输入,提供自然流畅的对话体验,适用于多种应用场景。
61 3
Multimodal Live API:谷歌推出新的 AI 接口,支持多模态交互和低延迟实时互动
|
7天前
|
前端开发 API 数据库
Next 编写接口api
Next 编写接口api
|
14天前
|
XML JSON 缓存
阿里巴巴商品详情数据接口(alibaba.item_get) 丨阿里巴巴 API 实时接口指南
阿里巴巴商品详情数据接口(alibaba.item_get)允许商家通过API获取商品的详细信息,包括标题、描述、价格、销量、评价等。主要参数为商品ID(num_iid),支持多种返回数据格式,如json、xml等,便于开发者根据需求选择。使用前需注册并获得App Key与App Secret,注意遵守使用规范。
|
13天前
|
JSON API 开发者
淘宝买家秀数据接口(taobao.item_review_show)丨淘宝 API 实时接口指南
淘宝买家秀数据接口(taobao.item_review_show)可获取买家上传的图片、视频、评论等“买家秀”内容,为潜在买家提供真实参考,帮助商家优化产品和营销策略。使用前需注册开发者账号,构建请求URL并发送GET请求,解析响应数据。调用时需遵守平台规定,保护用户隐私,确保内容真实性。
|
13天前
|
搜索推荐 数据挖掘 API
淘宝天猫商品评论数据接口丨淘宝 API 实时接口指南
淘宝天猫商品评论数据接口(Taobao.item_review)提供全面的评论信息,包括文字、图片、视频评论、评分、追评等,支持实时更新和高效筛选。用户可基于此接口进行数据分析,支持情感分析、用户画像构建等,同时确保数据使用的合规性和安全性。使用步骤包括注册开发者账号、创建应用获取 API 密钥、发送 API 请求并解析返回数据。适用于电商商家、市场分析人员和消费者。
|
23天前
|
JSON API 开发工具
淘宝实时 API 接口丨淘宝商品详情接口(Taobao.item_get)
淘宝商品详情接口(Taobao.item_get)允许开发者获取商品的详细信息,包括基本信息、描述、卖家资料、图片、属性及销售情况等。开发者需注册账号、创建应用并获取API密钥,通过构建请求获取JSON格式数据,注意遵守平台规则,合理使用接口,确保数据准确性和时效性。
|
24天前
|
JSON 安全 API
Python调用API接口的方法
Python调用API接口的方法
108 5
|
24天前
|
JSON 缓存 监控
淘宝商品详情接口(Taobao.item_get)丨淘宝API接口指南
淘宝商品详情接口(Taobao.item_get)允许开发者通过HTTP GET方法获取淘宝商品的详细信息,包括商品ID、价格、库存等。请求需包含key、secret、num_iid等必选参数,支持缓存及多种返回格式。此接口广泛应用于电商数据分析、商品选品、价格监控等领域,提升商家运营效率。
|
28天前
|
JSON 搜索推荐 API
LAZADA关键词搜索API接口的获取与应用
Lazada作为东南亚领先的电商平台,为满足开发者和商户需求,开放了关键词搜索API接口。本文详细介绍该接口的获取与应用,助力提升电商业务效率。接口支持关键词搜索、指定搜索范围和排序方式,提供精准、灵活且全面的数据支持,促进电商应用和服务的优化与创新。
25 3
|
1月前
|
JSON API 数据库
电商拍立淘按图搜索API接口,数据格式示例
电商拍立淘按图搜索API接口系列为电商平台和购物应用提供了强大的图像搜索功能,以下是其文档说明的详细参考