【Vite环境变量】import.meta.env 和 loadEnv使用和区别
前言
我们在做项目时需要各种配置信息（如应用标题、API 地址等），这些配置信息可能在不同环境下有所不同（如开发环境和生产环境）。
如果每次更改开发或者更改生产环境需要修改源代码中的相关配置，这会导致应用程序的可维护性变得极低！因此，我们可以将这些配置信息通过环境变量来进行管理。
一、 环境变量和使用场景
所以，环境变量的定义也就是：会根据当前的代码环境产生值的变化的变量就叫做环境变量。
在 Vite 项目中，使用环境变量提供了一种在不同环境下定制化应用行为的方式。通过读取环境变量，我们可以设置不同的配置信息。
开发中常见的场景有：
- 区分开发和生产环境
通过环境变量可以方便地区分当前应用运行的是开发还是生产环境。例如，在开发环境下，可以启用控制台日志和调试工具，而在生产环境下，则需要关闭这些功能以提升性能和安全性。
- 配置应用访问的 API 地址
应用通过 HTTP 请求与后端 API 进行通信。在开发和生产环境下，API 服务器的地址可能不同。通过环境变量，可以将 API 地址从应用代码中抽离出来，并在不同环境中指定不同的地址。
- 其他配置信息
除了 API 地址外，应用还有很多其他的配置信息，例如应用标题、主题颜色、版本号等。这些信息可以使用环境变量进行管理，避免硬编码在应用代码中，提高代码的可维护性和可扩展性。
- 构建时的配置
在开发环境下启用调试模式，在生产环境下禁用控制台输出等。此外，还可以使用环境变量来进行资源定位，例如根据当前环境选择不同的 API 地址、CDN 路径等。
二、import.meta.env 和 loadEnv
-
import.meta.env
1. 在 .env 文件中定义环境变量
VITE_APP_TITLE=Hello Vite!
2. 在代码中可以使用 import.meta.env 直接读取环境变量
// main.js
console.log(import.meta.env.VITE_APP_TITLE); // 输出：Hello Vite!
-
loadEnv
1. 在代码中需要先导入 Vite 提供的环境变量模块
// main.js
import.meta.env.DEV && require('dotenv').config(); // 在开发环境下自动加载 .env 文件
import { loadEnv } from 'vite';
loadEnv();
2. 使用 loadEnv 方法读取环境变量
// main.js
console.log(process.env.VITE_APP_TITLE); // 输出：Hello Vite!
三、使用注意事项
1. import.meta.env 和 loadEnv 的使用场景不同
import.meta.env 是在运行时获取环境变量的值，适用于应用程序代码中需要动态获取环境变量的场合。（配置文件中获取不到，因为配置文件是在构建时被读取！！！）
而 loadEnv 则是在构建时加载环境变量，适用于打包时（构建时）需要引用环境变量的场合。
2. 环境变量的值必须以 VITE_ 开头
与上面提到的一样，Vite 要求所有的环境变量必须以 VITE_ 开头。如果你想要使用 import.meta.env 或者 loadEnv 获取环境变量的值，需要遵循这个规则。
不过，也可以获取非VITE_ 开头得变量，但是要修改配置文件中的prefixes 配置（不推荐）。
而loadEnv函数可以通过改变第三个参数获取到非VITE_前缀的变量。
function loadEnv(
mode: string,
envDir: string,
prefixes: string | string[] = 'VITE_',
): Record
上面的第三个参数就是前缀，默认VITE_ ,不过可以改为 '' 空字符串。