如何通过Vite多环境配置实现项目的高定制化能力？

本文共计773个文字，预计阅读时间需要4分钟。

目录 + 业务背景 + 多环境场景的业务形态 + Vite多环境方案实现 + 多模式文件配置 + 自定义环境变量 + Vite默认环境变量 + 通过插件传递环境变量 + 客户端环境差异定制 + 效果图 + 解决的业务场景思考

目录

• 业务背景
• 多环境场景的业务形态
• Vite多环境方案实现
• 多模式文件配置
• 自定义环境变量
• Vite默认环境变量
• 通过插件透传环境变量
• 客户端环境差异定制
• 效果图
• 解决的业务场景思考

业务背景

近些年来，随着前端工程架构发展，使得前端项目中也能拥有如后端工程的模块能力。正所谓 “能力（越）越大（来），责任（越）越大（卷）”，现在的前端工程不仅仅要满足业务需求，还伴随更多复杂的环境适配问题，例如：

• api请求的域名会根据不同环境而不同；
• 线上环境和测试环境在打包策略有所不同「如线上要隔离sourceMap、屏蔽vue|react devtools等...」；
• 前端spa组件根据不同环境做出不同逻辑；

老板恨不得把所有应用端都收归到一个项目里面，什么微前端、uniapp多端方案接踵而至。。。但无论是什么方案，都离不开一个核心点：环境变量和多环境适配。那么，今天我们就来聊下如何在Vite中实现一套拓展能力强的多环境适配方案。

多环境场景的业务形态

我们先来了解，在多环境下要求前端工程架构流程是怎样的？

如上图所示，在工程启动 / 构建时：

• 环境变量注入：一般通过命令参数模式，可在package.json里配置；
• 多模式文件：Vite根据环境变量来读取配置文件，把文件参数抽取出来做特性区分，这块也称为Vite的环境模式；
• 环境收集器：简单理解为1个函数，做的事情就是把第二步的特性参数归整到一处并做些特定的逻辑，之后通过插件生成客户端的最终参数并吐出；
• 客户端环境差异定制化：客户端（也就是工程里面的.vue、.ts、.tsx等前端文件）获取到环境参数做一些特定区分逻辑；
• 构建和发布：之后就是项目根据以上几步产出的环境特性文件来打包，最终推送到服务端完成整个前端工程的生产。

以上是大体流程，接下来会每步细分给大家讲解如何实现。方便大家理解，本次笔者专门开了个新GitHub项目来存放本文所有实现代码，有兴趣的同学可以拿下来实操下