Vite 如何使用 vite env 变量？

Vite 允许开发者在项目中使用环境变量，这些变量可以是开发、测试或生产环境下的特定设置。在 Vite 中使用环境变量的步骤如下：

1. 创建环境变量文件

   在项目的根目录下，你可以创建.env文件来定义环境变量。如果需要区分环境，可以创建特定的文件，比如：

   • .env ：所有情况下都会加载
   • .env.local ：所有情况下都会加载，但会被 git 忽略
   • .env.[mode] ：只在指定模式下加载
   • .env.[mode].local ：只在指定模式下加载，且会被 git 忽略

   其中[mode]可以是development、production或者其他自定义的模式名称。

2. 定义环境变量

   在.env文件中，你可以按如下方式定义环境变量：

   shell
   # .env 文件
   VITE_APP_TITLE=My App
   VITE_API_URL=https://api.example.com

   需要注意的是，Vite 要求所有环境变量必须以VITE_开头，这样做是为了防止意外暴露环境中的敏感变量。

3. 在项目中使用环境变量

   你可以在项目的 JavaScript 或 TypeScript 文件中使用import.meta.env来访问这些变量，例如：

   javascript
   // 访问环境变量
   console.log(import.meta.env.VITE_APP_TITLE); // 输出: My App
   console.log(import.meta.env.VITE_API_URL);   // 输出: https://api.example.com

   这样你就可以根据不同的环境来更改变量，而不需要修改代码。

4. 类型支持

   为了在 TypeScript 中获得更好的类型支持，你可以定义一个env.d.ts文件，并声明ImportMetaEnv接口以提供自动补全和类型检查：

   typescript
   // env.d.ts 文件
   interface ImportMetaEnv {
     readonly VITE_APP_TITLE: string;
     readonly VITE_API_URL: string;
     // 更多环境变量...
   }
   
   interface ImportMeta {
     readonly env: ImportMetaEnv;
   }

5. 在 HTML 中使用环境变量

   也可以在index.html中使用环境变量，Vite 会在构建时替换这些变量：

   html
   <!-- index.html -->
   <title>%VITE_APP_TITLE%</title>

   在构建时，%VITE_APP_TITLE%将被实际的环境变量值替换。

通过以上步骤，你就可以在 Vite 项目中使用环境变量来管理不同环境下的配置了。这种方式使得应用配置更加灵活，同时也保护了敏感数据。