【Vite环境变量】import.meta.env 和 loadEnv使用和区别

前言

我们在做项目时需要各种配置信息（如应用标题、API 地址等），这些配置信息可能在不同环境下有所不同（如开发环境和生产环境）。

如果每次更改开发或者更改生产环境需要修改源代码中的相关配置，这会导致应用程序的可维护性变得极低！因此，我们可以将这些配置信息通过环境变量来进行管理。

一、 环境变量和使用场景

所以，环境变量的定义也就是：会根据当前的代码环境产生值的变化的变量就叫做环境变量。

在 Vite 项目中，使用环境变量提供了一种在不同环境下定制化应用行为的方式。通过读取环境变量，我们可以设置不同的配置信息。

开发中常见的场景有：

1. 区分开发和生产环境

通过环境变量可以方便地区分当前应用运行的是开发还是生产环境。例如，在开发环境下，可以启用控制台日志和调试工具，而在生产环境下，则需要关闭这些功能以提升性能和安全性。

1. 配置应用访问的 API 地址

应用通过 HTTP 请求与后端 API 进行通信。在开发和生产环境下，API 服务器的地址可能不同。通过环境变量，可以将 API 地址从应用代码中抽离出来，并在不同环境中指定不同的地址。

1. 其他配置信息

除了 API 地址外，应用还有很多其他的配置信息，例如应用标题、主题颜色、版本号等。这些信息可以使用环境变量进行管理，避免硬编码在应用代码中，提高代码的可维护性和可扩展性。

1. 构建时的配置

在开发环境下启用调试模式，在生产环境下禁用控制台输出等。此外，还可以使用环境变量来进行资源定位，例如根据当前环境选择不同的 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_ ,不过可以改为 '' 空字符串。