如何获取 Vite 环境变量？

要在 Vite 项目中获取环境变量，你可以按照如下步骤操作：

1. 定义环境变量： 在项目根目录下，你可以创建一个 .env 文件来定义你的环境变量。Vite 要求环境变量以 VITE_ 作为前缀。例如，创建 .env 文件并添加如下内容：

   shell
   VITE_API_URL=https://myapi.com
   VITE_API_KEY=secretkey

   这里定义了两个环境变量：VITE_API_URL 和 VITE_API_KEY。

2. 访问环境变量： 在你的 Vite 项目代码中，可以使用 import.meta.env 来访问定义的环境变量。例如：

   javascript
   const apiUrl = import.meta.env.VITE_API_URL;
   const apiKey = import.meta.env.VITE_API_KEY;

   这段代码会获取之前在 .env 文件中定义的 VITE_API_URL 和 VITE_API_KEY 环境变量的值。

3. 模式和环境变量文件： 你可以为不同的环境（如开发、生产）准备不同的 .env 文件。例如，.env.development 和 .env.production。当你运行或构建项目时，Vite 会自动根据当前的模式加载对应的 .env 文件。

4. 类型声明（可选）： 为了在 TypeScript 项目中获得更好的类型提示，你可以在 env.d.ts 文件中声明环境变量的类型：

   typescript
   interface ImportMetaEnv {
     readonly VITE_API_URL: string;
     readonly VITE_API_KEY: string;
     // 更多的环境变量...
   }
   
   interface ImportMeta {
     readonly env: ImportMetaEnv;
   }

   这样做可以让 TypeScript 知道哪些环境变量是可用的，并且提供它们的正确类型。

举一个具体的例子，假设我们正在开发一个需要调用 API 的前端应用，我们可能需要一个 API 的基础 URL 和一个 API 密钥。在开发和生产环境中，这些值通常是不同的。那么，我们可以这样设置环境变量：

• 在 .env.development 文件中：

  shell
  VITE_API_URL=http://localhost:3000
  VITE_API_KEY=development-secret-key

• 在 .env.production 文件中：

  shell
  VITE_API_URL=https://production-api.com
  VITE_API_KEY=production-secret-key

当我们在不同环境下运行或构建应用时，Vite 会自动加载正确的环境变量文件，并且我们的代码可以无缝地使用这些变量来执行 API 调用。