Vite 自定义环境变量：读取外部配置指南

Vite 自定义环境变量：读取外部配置指南

使用 Vite 的自定义环境变量功能可以轻松读取外部配置内容。以下是具体步骤：

1. 创建 .env 文件 在项目的根目录下创建一个名为 .env 的文件，用于存储环境变量。

2. 添加环境变量 在 .env 文件中，每行添加一个环境变量，格式为 KEY=VALUE。例如：

   API_URL='https://api.example.com'
   

3. 加载环境变量 在你的 Vite 配置文件（例如 vite.config.js）中，引入 dotenv 模块，并调用 config() 方法来加载环境变量。

   import dotenv from 'dotenv';
   
   dotenv.config();
   
   export default {
     // Vite 配置选项...
   };
   

4. 访问环境变量 在你的代码中，可以使用 import.meta.env 对象来访问环境变量。例如：

   console.log(import.meta.env.VITE_API_URL); // 输出：'https://api.example.com'
   

注意事项：

• 请确保在使用环境变量之前已经加载了 .env 文件，否则变量的值将为 undefined。
• 请注意环境变量的命名规则，Vite 默认使用 VITE_ 前缀来区分环境变量，例如 VITE_API_URL。
• 环境变量的值将在构建时被静态地嵌入到代码中。如果需要动态地读取外部配置，可以考虑使用 AJAX 请求或其他方式获取配置值。