> 本文为原创文章，引用请注明出处，欢迎大家收藏和分享💐💐 # 业务背景近些年来，随着前端工程架构发展，使得前端项目中也能拥有如后端工程的模块能力。正所谓 “能力`（越）`越大`（来）`，责任`（越）`越大`（卷）`”，现在的前端工程不仅仅要满足业务需求，还伴随更多复杂的环境适配问题，例如： > + api请求的域名会根据不同环境而不同； > + 线上环境和测试环境在打包策略有所不同「如线上要隔离sourceMap、屏蔽vue|react devtools等...」； > + 前端spa组件根据不同环境做出不同逻辑；老板恨不得把所有应用端都收归到一个项目里面，什么微前端、uniapp多端方案接踵而至。。。但无论是什么方案，都离不开一个核心点：**环境变量和多环境适配**。那么，今天我们就来聊下如何在`Vite`中实现一套拓展能力强的多环境适配方案。 # 多环境场景的业务形态我们先来了解，在多环境下要求前端工程架构流程是怎样的？ ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b6dacd4186094ab7a28e502e8944078c~tplv-k3u1fbpfcp-watermark.image?) 如上图所示，在工程`启动 / 构建`时： 1. **环境变量注入**：一般通过命令参数模式，可在`package.json`里配置； 2. **多模式文件**：Vite根据环境变量来读取配置文件，把文件参数抽取出来做特性区分，这块也称为[Vite的环境模式](https://cn.vitejs.dev/guide/env-and-mode.html)； 3. **环境收集器**：简单理解为1个函数，做的事情就是把第二步的特性参数归整到一处并做些特定的逻辑，之后通过插件生成客户端的最终参数并吐出； 4. **客户端环境差异定制化**：客户端（也就是工程里面的`.vue、.ts、.tsx`等前端文件）获取到环境参数做一些特定区分逻辑； 5. **构建和发布**：之后就是项目根据以上几步产出的环境特性文件来打包，最终推送到服务端完成整个前端工程的生产。以上是大体流程，接下来会每步细分给大家讲解如何实现。方便大家理解，本次笔者专门开了个新[GitHub项目](https://github.com/JohnnyZhangQiao/vite-mul-env-learn)来存放本文所有实现代码，有兴趣的同学可以拿下来实操下🌹🌹。 # Vite多环境方案实现 ## 多模式文件配置 ### 自定义环境变量 `Vite`通过 [多模式](https://cn.vitejs.dev/guide/env-and-mode.html#modes) 来配置不同启动场景下的特性环境变量，你可以创建自定义的模式文件，如下： ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/63e5056cbf9b4fff9565d3124beb8432~tplv-k3u1fbpfcp-watermark.image?) 这个项目创建了4种模式分别兼容`release、beta、测试、本地`环境，每种模式下有自己特定的环境变量，例如`.env.local`的内如如下： ```bash # .env._local # 透传客户端参数 VITE_NODE_ENV=local VITE_OWNER=Tom VITE_POSITION=广州，天河 # 私有参数，仅在vite server获取到， # 假如你的项目包含此类敏感变量。应该将文件添加到你的 .gitignore 中，以避免它们被 git 检入。 MODE_KEY=PRIVATE_KEY_LOCAL ``` 根据Vite的约定规则，只有以`“VITE_”`开头的变量才会在客户端被捕获，捕获方式为：`import.meta.env.{参数名}`。至于非`“VITE_”`开头的变量属于私有属性，不会传递出去。假如你的项目包含此类敏感变量。应该将文件添加到你的 `.gitignore` 中，以避免它们被 git 检入。完成上述配置后，我们只需要在`package.json`增加对应的启动命令就可以让Vite获取哪个模式来运行项目了： ```json { "name": "vite-mul-env-learn", "version": "0.0.0", "scripts": { "dev:local": "vite --mode _local", "dev:test": "vite --mode test", "build:beta": "vite build --mode beta", "build:release": "vite build --mode release", "lint": "eslint --fix --ext .js,.vue,ts src" } } ``` ### Vite默认环境变量 Vite 在一个特殊的 **`import.meta.env`** 对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量： > - **`import.meta.env.MODE`**: {string} 应用运行的[模式](https://cn.vitejs.dev/guide/env-and-mode.html#modes)。 > - **`import.meta.env.BASE_URL`**: {string} 部署应用时的基本 URL。他由[`base` 配置项](https://cn.vitejs.dev/config/#base)决定。 > - **`import.meta.env.PROD`**: {boolean} 应用是否运行在生产环境。 > - **`import.meta.env.DEV`**: {boolean} 应用是否运行在开发环境 (永远与 `import.meta.env.PROD`相反)。 > - **`import.meta.env.SSR`**: {boolean} 应用是否运行在服务器渲染环境。这里补充说明下，`DEV 和 PROD`分别对应`package.json`中启动dev和build命令决定的，而`SSR`则是对应了Vite启动时设定的`middlewareMode`变量决定的： ```typescript const { createServer: createViteServer } = require('vite') const vite = await createViteServer({ server: { middlewareMode: 'ssr' } }) ``` ## 通过插件透传环境变量很多情况下，我们的环境变量不仅仅是简单的字符串，而是通过vite服务中二次计算才能得到最终结果，有点类似Vue中`computed`或React中`useMemo`、`useCallback`的效果。像这类非静态的环境变量，我们需要借助插件能力来让它们也能够返回客户端，插件很多，这里推荐`vite-plugin-environment`，使用大概是这样子的： You can provide a list of environment variable names to expose to your client code: ```typescript import { defineConfig } from 'vite' import EnvironmentPlugin from 'vite-plugin-environment' export default defineConfig({ plugins: [ EnvironmentPlugin(['API_KEY', 'DEBUG']), ], }) ``` And then use them as: ```typescript const apiKey = process.env.API_KEY ``` 在这个基础上，我们还能配合模式文件进行联合判断： ```typescript import { defineConfig, ConfigEnv, loadEnv } from 'vite'; import vue from '@vitejs/plugin-vue'; import path from 'path'; import EnvironmentPlugin from 'vite-plugin-environment'; import { fetchEnv } from './server/envUitls'; // https://vitejs.dev/config/ export default defineConfig(({ command, mode }: ConfigEnv) => { const env = loadEnv(mode, __dirname); const { proxy } = fetchEnv(env.VITE_NODE_ENV); // 设置域名和端口 return { base: './', plugins: [ vue(), EnvironmentPlugin({ PROXY: proxy }) ] }; }); ``` `const env = loadEnv(mode, __dirname);`可以获取`.env._local`是所有非私密参数，接下来程序可以根据模式参数来计算最终的环境变量，通过插件返回到客户端。 `fetchEnv`方法可以理解成环境收集器，里面可以写逻辑让环境参数得到统一整合。 ## 通过插件透传环境变量除此之外，`Vite`还支持通过`define`配置项来实现把环境变量透传到页面： ```typescript import { defineConfig, ConfigEnv } from 'vite'; import pkg from './package.json'; // https://vitejs.dev/config/ export default defineConfig(({ command, mode }: ConfigEnv) => { return { define: { SERVER_TIMESTAMP: Date.now(), PROJECT_VERSION: JSON.stringify(pkg.version) } }; }); ``` 举个例子，我们在上面配置了2个全局变量`SERVER_TIMESTAMP`「服务器时间」和`PROJECT_VERSION`「项目版本号」。之后就可以页面直接使用这2个值： ```typescript ``` 值得注意的是，若你使用`typescript`，记得加上类型定义： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/68e9c94f7789420c987e5feb9385e31f~tplv-k3u1fbpfcp-watermark.image?) ## 客户端环境差异定制这块就很好理解了，无非就是通过指定方法获取环境变量，来条件渲染vue或React组件。下面做了个demo： ```typescript ``` ### 效果图 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6be6e10f4a1c49a98c9054e795585ff0~tplv-k3u1fbpfcp-watermark.image?) # 解决的业务场景思考除了本文 **“业务背景”** 模块所说的最直观的场景外，其实还可以做很多项目工程化相关的高阶操作。假如项目构建操作放在远程服务器进行，那么在构建打包前就可以联动服务api来生产出不同版本、不同模式的构建包，甚至可以把SSR逻辑放到这块来做，达到“千人千面”的效果。 # 收场本篇文章到这里就结束了，如果文章对你有用，可以**三连**支持一下，如果你有更好的见解，欢迎指正~ 欢迎大家关注本人[公众号「似马非马」](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/85b6d4713f3e417e81a7e27f3cd05216~tplv-k3u1fbpfcp-watermark.image)，一起玩耍起来！🌹🌹 > 本文的所有demo，都专门开了个[GitHub项目](https://github.com/JohnnyZhangQiao/vite-mul-env-learn)来保存，有需要的同学可以拿下来实操。

①通过环境文件传入的参数

②环境插件传递的参数

③Vite环境自带参数

④通过Vite define定义的全局变量