vite配置多环境打包

最新推荐文章于 2026-04-30 13:35:42 发布
原创 最新推荐文章于 2026-04-30 13:35:42 发布 · 1.1w 阅读 · 9
标签
#vue #前端
本文介绍了如何在Vite项目中配置多环境打包，包括创建.env.uat环境变量文件，设置VITE_PROJECT_ENV，以及在package.json中定义uat打包命令。通过import.meta.env.VITE_PROJECT_ENV可以获取当前环境，实现不同环境间的接口适配。

背景

在项目打包的时候，我们通常需要根据环境变量来区分不同的环境，以请求不同的后台接口

vite配置多环境打包

首先看vite官网介绍的方法
在这里插入图片描述
那么我们在项目的根目录下创建如下的环境配置文件，以uat为例，在项目根目录下创建.env.uat,并新增环境变量VITE_PROJECT_ENV = ‘uat’,需要注意的是，环境变量必须以VITE开头,
在这里插入图片描述
package.json中配置uat环境的打包命令，在vite build后加上- -mode uat来区分打包环境
在这里插入图片描述
之后在项目中即可通过以下方式获取到配置的环境变量，以区分不同的环境

console.log(
最低0.47元/天 解锁文章
配置篇05|vite中环境变量的使用及配置
石小石Orz的博客
11-30 1万+
vite中环境变量使用与配置（全网最全）
vite打包时通过.env在不同的模式下传递不同环境变量数据
SunFlower914的博客
01-30 3053
要在打包过程中，根据不通模式获取到不同的环境变量值，需要通过--mode选项标志来覆盖命令使用的默认模式，比如开发环境/测试环境/生产环境都对应不同的标题： 1. 先在项目根目录下创建三个.env文件对应三个环境变量； 2. 在package.json文件中scripts内传递 --mode 选项标志来覆盖命令使用的默认模式； 3. 使用const uploadFileUrl = ref(import.meta.env.VITE_APP_TITLE)
vite开发环境、生产环境配置
前端小菜鸟也有人起的博客
08-14 723
vite开发环境、生产环境配置
Vite的多页面，Vite的打包配置相关
最新发布
2302_81102841的博客
04-30 640
Vite 多页面的核心是“多个 HTML 入口”，Vite 打包配置的核心是“入口、输出、路径、代理、分包、压缩”。
记录转载：Vite多环境配置--让项目拥有更高定制化能力
林恒的博客
06-09 989
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 业务背景 近些年来，随着前端工程架构发展，使得前端项目中也能拥有如后端工程的模块能力。正所谓 “能力(越)越大(来)，责任(越)越大(卷)”，现在的前端工程不仅仅要满足业务需求，还伴随更多复杂的环境适配问题，例如： 1.api请求的域名会根据不同环境而不同； 2.线上环境和测试环境在打包策略有所不同「如线上要隔离sourceMap...
vue3+vite前端搭建初步入门
做GIS梦的人
04-20 3370
vue2+webpack用了几年时间了，现在vue3越来越火，据说vite的打包速度非常快，这里就记录一下vue3+vite的一些简单的入门内容 项目创建 项目创建也是通过npm命令就可以了 npm init vite-app demo #demo是项目名 #跳转到项目的根目录，然后install npm install # 本地运行 npm run dev 这样项目就创建好了 必备工具 eventBus不能用的解决方案 用习惯vue的人，肯定经常使用eventBus。在刚刚创建的项目中
Vite的环境变量
Java精灵
03-21 4194
Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。
vite项目怎么build打包成不同环境的代码？从而适配不同环境api接口
这是一个web全栈开发的博客，取其精华去其糟粕，争取让大家一看就懂，一学就会，一用就成~
05-24 1519
在开发 Web 应用的过程中，我们需要在不同的环境中运行和测试我们的应用程序（如开发环境、测试环境和生产环境）。每个环境都有其特定的 API 接口和配置。Vite，一个基于 ESBuild 的前端构建工具，可以帮助我们实现这个需求。vite 配置官方文档：点击其实 vite 打包的时候，主要是根据不同的环境来生成不同的打包文件的，所以不同的环境是怎么区分呢？默认情况下，开发服务器 (dev命令) 运行在(开发) 模式，而build命令则运行在production。
Vite多环境配置与打包：灵活高效的Vue开发工作流
interest_ing_的博客
04-15 5374
Vite作为一个新兴的前端构建工具，提供了快速的冷启动、即时模块热更新以及真正的按需编译，极大地提高了Vue开发效率。本文将向你展示如何在Vite中设置多环境开发和打包，包括如何配置环境变量、如何应用这些变量以及如何根据不同的环境进行项目的构建。通过这些步骤，你可以确保在开发、测试和生产等不同阶段中，你的应用都能以最佳状态运行。无论你是Vite的新手还是希望优化现有工作流的开发者，本文都将为你提供实用的指导和建议。
Vite多环境配置与打包:
2301_76662406的博客
10-06 6371
开发命令（如 npm run dev）默认使用开发模式。构建命令（如 vite build）默认使用生产模式。这两者并不冲突。在开发过程中，你通常使用开发模式，而在构建生产版本时，Vite 则使用生产模式。你的项目默认是开发环境，通常是因为没有显式指定其他环境模式。你可以通过查看 package.json、vite.config.js 和环境变量文件来确认和修改环境配置。
vite vue3进行多环境打包配置
qq_35181466的博客
07-19 7308
对此创建的vu3项目进行构建，项目分为四个环境：本地、测试、预发、生产。
vue3 vite 多环境 打包配置
qq_43978573的博客
05-20 6749
此vu3项目使用vite进行构建，项目分为四个环境：本地、测试、预发、生产除本地环境外，每次都需要将vue项目打包，默认 都是 dist文件，需要根据不同的环境生成不同的文件名。
Vite学习之模式
悦涵仙子的技术笔记本
11-01 1981
NODE_ENV=…可以在命令中设置，也可以在 .env 文件中设置。在某些情况下，若想在 vite build 时运行不同的模式来渲染不同的标题，你可以通过传递 --mode 选项标志来覆盖命令使用的默认模式。npx rimraf node_modules 这个命令是在使用 Node.js 开发时，用于删除项目中的 node_modules 文件夹的命令。使用 Node.js 运行 Vite 的构建命令，并手动设置 Node.js 的老生代内存限制为 8 GB，以确保在构建大型项目时有足够的内存可用。
手写VUE后台管理系统9 - 多环境配置
死牛胖子的技术随笔
12-11 374
从零开始手写VUE后台管理系统，多环境配置
vite开发的项目如何打包build不同环境的代码？适配不同环境api接口
05-10 1396
其实vite打包的时候，主要是根据不同的环境来生成不同的打包文件的，所以不同的环境是怎么区分呢？默认情况下，开发服务器 (dev命令) 运行在(开发) 模式，而build命令则运行在production(生产) 模式，也就是在package.json里面的命令：这意味着当执行vite build时，它会自动加载在你的应用中，你可以使用渲染标题。在某些情况下，若想在vite build时运行不同的模式来渲染不同的标题，你可以通过传递--mode选项标志来覆盖命令使用的默认模式。还需要新建一个由于。
VUE项目中的package.json中的启动脚本
qq_39666711的博客
04-14 686
vite build和都是 Vite 构建工具的内置功能，前者是默认的生产环境构建命令，后者则允许你通过指定环境模式，灵活地为不同环境进行针对性的构建。
VUE3 学习笔记（四）彻底搞懂vite 环境变量
sensor_WU 博客
03-23 7136
env # 所有情况下都会加载.env.local # 所有情况下都会加载，但会被 git 忽略.env.[mode] # 只在指定模式下加载.env.[mode].local # 只在指定模式下加载，但会被 git 忽略注意，上面这些是文件名，其中方括号[mode]是指当前构建模式，比如：development表示开发环境，production表示生产环境。注意：以上文件默认情况下一定要和 vite.config.ts 配置文件放在同一个目录，否则将导致无法加载到环境变量。
vue给不同环境配置不同打包命令
dogface博客
05-27 3007
VUE给不同环境处理不同的打包命令，用环境变量去处理不同接口进行测试和发布（如开发环境、测试环境，正式环境等） 1.新建.env文件; .env 全局默认配置文件，不论什么环境都会加载合并 .env.development 开发环境下的配置文件 .env.test 测试环境下的配置文件 .env.production 生产环境下的配置文件 2.环境变量配置 VITE_APP_SERVER_NAME="user" VITE_APP_SERVER_ID=1 VITE_APP_API = "ht
四，vite开发环境、生产环境配置
热门推荐
blue_121的博客
06-15 1万+
一个项目可能会有开发版本、上线版本、测试版本等等多个版本，不同的环境会有不同请求api接口，就需更改一些基本配置，这时候就显得很麻烦，所以这里就使用了环境变量。我们只需做简单的配置，把环境状态切换的工作交给代码。
vite基础知识-1
weixin_43484007的博客
10-24 2573
讲vite之前，我们先来了解一下webpack的原理。webpack支持多种模块化（浏览器端和服务端都可以运行）。webpack将上述代码编译：(编译后才能在浏览器运行)webpack的编译原理：构建AST，抽象语法分析上述js文件有哪些导入和导出的操作，但是这个过程是运行在服务端的。因为webpack支持这种多模块的形式，所以必须统一模块化代码。因此构建项目之前它会把所有的依赖都读取一便进行转换，导致项目启动时非常耗时。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值