vite 环境变量配置文件
前提文档链接
Vite 环境变量和模式文档：https://vitejs.cn/vite3-cn/guide/env-and-mode.html#env-files
开发环境与配置文件
在项目开发中，我们往往需要在不同环境下使用不同的配置，比如开发环境、测试环境、生产环境等。
在项目开发中，常见的环境有
-
dev– 开发环境，外部用户无法访问，开发人员使用，版本变动大。 -
prod– 生产环境，面向外部用户的环境，正式环境。 -
test– 测试环境，外部用户无法访问，专门给测试人员使用的，版本相对稳定。 -
sit (System Integration Test)– 集成环境，系统集成测试，开发人员自己测试流程是否走通。 -
uat (User Acceptance Test environment)– 用户验收测试环境，主要面向要交付的人员进行验证测试。 -
pre– 灰度环境，外部用户可以访问，但是服务器配置相对低，其它和生产一样。 -
fat (Feature Acceptance Test environment)– 功能验收测试环境，用于软件测试者测试使用。在以 Vite 作为构建工具开发项目时，环境变量配置文件名为.env，文件名后缀为.env.[mode]，其中mode为环境名称，如dev、prod、test等。
根据 mode 的不同，可以配置不同的环境变量，例如
.env.development
.env.production
.env.test
默认情况下，Vite 会自动读取 .env 文件（通用配置），并根据 NODE_ENV 的值来确定当前环境。
但对于一份指定模式的文件（例如 .env.production）会比通用形式的优先级更高（例如 .env）。且相同的配置项，指定模式的文件会覆盖通用配置。
虽说环境有多种，但真正的开发模式只有两种
-
development：开发模式下 -
production：生产模式下
我们可以在不同的开发模式下配置多种环境，基于这种情况下，又习惯性的把 开发环境 和 生产环境 作为主环境，而在主环境下配置各种子环境，显示的把开发模式指定出来，便于开发人员理解，基于此，有些项目的环境目录会出现以下情况
.env.development
.env.development.sit
.env.production
.env.production.uat
环境变量
在 Vite 中，环境变量的命名规则默认为 VITE_ 开头，例如 VITE_API_URL。
官方解释
为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量才会暴露给经过 vite 处理的代码。例如下面这些环境变量：
1 | > VITE_SOME_KEY=123 |
只有 VITE_SOME_KEY 会被暴露为 import.meta.env.VITE_SOME_KEY 提供给客户端源码，而 DB_PASSWORD 则不会。
1 | > console.log(import.meta.env.VITE_SOME_KEY) // 123 |
如果修改默认前缀，请参阅 envprefix。
环境变量的使用
在项目中，有些公共部分是需要我们抽离出来，作为环境变量进行配置，例如：API_BASE_URL，ROUTE_BASE_URL等等。
我们可以在 .env.[mode] 配置文件中填写
1 | VITE_APP_API_URL=http://x.x.x.x:xx |
在项目中，我们可以通过 import.meta.env.[变量名] 来获取这些环境变量。
1 | console.log(import.meta.env.VITE_APP_API_URL) |
指定开发环境
我们可以通过获取这些环境变量以达到不同环境下使用不同变量的功能，但我们如何确定当前环境或者当前模式呢？
指定开发环境的模式
开发环境的模式需要在配置文件中配置 NODE_ENV 变量，Vite 会自动读取该变量，并根据该变量的值来确定当前开发模式，默认为 development。
NODE_ENV 有两个值：
-
development：开发模式 -
production：生产模式
在有些时候，我们不需要进行显示的配置，Vite 内部会自动根据当前环境来确定开发模式。例如：
默认情况下，开发服务器 (dev 命令) 运行在 development (开发) 模式，而 build 命令（打包命令）则运行在 production (生产) 模式。
这意味着当执行 vite build 时，它会自动加载 .env.production 中可能存在的环境变量。 ————官方解释
指定环境类型
在上文我们提到了 .env.[mode] ，我们只需要改写 mode 值便可实现环境的创建，在真实情况下，mode 可以是任意值，但为了避免混淆，我们可以遵循以上的软规定。
通过改变 mode 的值便可创建一个环境，但除了 .env.development 和 .env.production 可以被 Vite 自动识别在 dev命令 和 build 命令情况下读取变量外，其他的 mode 配置只会根据 NODE_ENV 的值来识别其对应的配置文件。
我们还需要在启动命令中进行模式指定，在项目根目录的 package.json 中的执行脚本 script 中添加一条命令，如
1 | "dev-test": "vite --mode test", |
通过指定 --mode 参数，Vite 就会根据当前启动命令指定的模式来加载对应的 Vite 项目中 .env.[mode] mode 指定的配置文件。
示例
在 .env.development 中配置
我在封装的请求模块中引用 VITE_APP_API_URL 变量
通过 npm run dev 启动项目，在网络请求中的 baseURL 显示为 http://10.111.11.11:8080
我们更换环境
在 .env.test 中配置
在 package.json 中添加一条命令
运行 npm run dev-test，在网络请求中的 baseURL 显示为 http://10.122.22.22:8001
注意事项
当前 Vite 版本执行打包命令时，如果在 .env,production 中指定了 NODE_ENV:production，会报错，只需把该配置删除即可，打包时还是会读取 .env,production 的配置。