vite配置多环境打包

简介: vite配置多环境打包

背景

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

vite配置多环境打包

首先看vite官网介绍的方法

image.png

那么我们在项目的根目录下创建如下的环境配置文件,以uat为例,在项目根目录下创建.env.uat,并新增环境变量VITE_PROJECT_ENV = ‘uat’,需要注意的是,环境变量必须以VITE开头,

image.png

package.json中配置uat环境的打包命令,在vite build后加上- -mode uat来区分打包环境

image.png

之后在项目中即可通过以下方式获取到配置的环境变量,以区分不同的环境

console.log(import.meta.env.VITE_PROJECT_ENV);



目录
相关文章
|
中间件 API
nuxt3:我们开始吧-开发-配置-部署(二)
nuxt3:我们开始吧-开发-配置-部署(二)
534 0
|
JavaScript 中间件 API
nuxt3:我们开始吧-开发-配置-部署(一)
nuxt3:我们开始吧-开发-配置-部署(一)
992 0
|
存储 应用服务中间件 nginx
nuxt3:我们开始吧-开发-配置-部署(三)
nuxt3:我们开始吧-开发-配置-部署(三)
1153 0
UMI多环境配置
一般来说项目不止有dev和prod两个环境,umi可以通过环境变量 UMI_ENV 区分不同环境来指定配置。
1389 0
|
4月前
Vite 项目中如何去集成 Mock 环境 (插件:vite-plugin-mock)
Vite 项目中如何去集成 Mock 环境 (插件:vite-plugin-mock)
175 0
|
4月前
|
JavaScript
Vite 项目中如何去集成 Sass
Vite 项目中如何去集成 Sass
62 0
|
5月前
|
前端开发 测试技术 API
vite项目怎么build打包成不同环境的代码?从而适配不同环境api接口
vite项目怎么build打包成不同环境的代码?从而适配不同环境api接口
313 0
|
JavaScript
为老的vueCli项目添加vite支持
为老的vueCli项目添加vite支持
130 0
为老的vueCli项目添加vite支持
|
缓存 JavaScript CDN
关于vite打包优化,你了解多少
关于vite打包优化,你了解多少
|
Web App开发 缓存 前端开发