目录 业务背景 多环境场景的业务形态 Vite多环境方案实现 多模式文件配置 自定义环境变量 Vite默认环境变量 通过插件透传环境变量 客户端环境差异定制 效果图 解决的业务场景思考
目录
- 业务背景
- 多环境场景的业务形态
- Vite多环境方案实现
- 多模式文件配置
- 自定义环境变量
- Vite默认环境变量
- 通过插件透传环境变量
- 客户端环境差异定制
- 效果图
- 解决的业务场景思考
业务背景
近些年来，随着前端工程架构发展，使得前端项目中也能拥有如后端工程的模块能力。正所谓 “能力（越）越大（来），责任（越）越大（卷）”，现在的前端工程不仅仅要满足业务需求，还伴随更多复杂的环境适配问题，例如：
- api请求的域名会根据不同环境而不同；
- 线上环境和测试环境在打包策略有所不同「如线上要隔离sourceMap、屏蔽vue|react devtools等...」；
- 前端spa组件根据不同环境做出不同逻辑；
老板恨不得把所有应用端都收归到一个项目里面，什么微前端、uniapp多端方案接踵而至。。。但无论是什么方案，都离不开一个核心点：环境变量和多环境适配。那么，今天我们就来聊下如何在Vite中实现一套拓展能力强的多环境适配方案。
多环境场景的业务形态
我们先来了解，在多环境下要求前端工程架构流程是怎样的？
如上图所示，在工程启动 / 构建时：
- 环境变量注入：一般通过命令参数模式，可在package.json里配置；
- 多模式文件：Vite根据环境变量来读取配置文件，把文件参数抽取出来做特性区分，这块也称为Vite的环境模式；
- 环境收集器：简单理解为1个函数，做的事情就是把第二步的特性参数归整到一处并做些特定的逻辑，之后通过插件生成客户端的最终参数并吐出；
- 客户端环境差异定制化：客户端（也就是工程里面的.vue、.ts、.tsx等前端文件）获取到环境参数做一些特定区分逻辑；
- 构建和发布：之后就是项目根据以上几步产出的环境特性文件来打包，最终推送到服务端完成整个前端工程的生产。
以上是大体流程，接下来会每步细分给大家讲解如何实现。方便大家理解，本次笔者专门开了个新GitHub项目来存放本文所有实现代码，有兴趣的同学可以拿下来实操下