Vite 作为新一代前端构建工具，以其极速的开发体验征服了无数开发者的心。今天，就让我们深入Vite的内部，揭秘环境变量的配置和使用技巧，助你轻松打造高效、灵活的前端项目！

为什么需要环境变量？

想象一下，你的项目需要在不同的环境下运行，比如开发、测试和生产环境。每个环境可能需要不同的API地址、密钥和其他配置信息。手动修改这些配置显然是不可取的，这时就需要环境变量大显身手了！

Vite 环境变量配置三步走

1. 定义环境变量文件： 在项目根目录下创建 .env 文件及以 .env. 为前缀并以环境模式为后缀的文件，例如 .env.development、.env.production。

   # .env  所有模式都会加载
   VITE_SOME_KEY=123

   # .env.development  开发环境加载
   VITE_BASE_URL=http://localhost:5173
   VITE_API_URL=/dev-api

   # .env.production 生产环境加载
   VITE_BASE_URL=/
   VITE_API_URL=/prod-api

Vite 使用 dotenv 来加载环境变量，它会自动解析以 VITE_ 开头的变量。

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

   console.log(import.meta.env.VITE_BASE_URL); // 输出当前环境的 BASE_URL

3. 使用环境变量： 根据不同的环境变量执行不同的逻辑，例如设置API地址。

   const apiUrl = import.meta.env.VITE_API_URL;

   fetch(apiUrl + '/users')
     .then(res => res.json())
     .then(data => {
       console.log(data);
     });

实战演练：根据环境动态加载API地址

// src/api/index.js
const env = import.meta.env;
const baseURL = env.VITE_API_URL;

export default {
  getUsers() {
    return fetch(baseURL + '/users').then(res => res.json());
  },
  // 其他 API 函数...
};

源码解析： Vite 如何加载环境变量

Vite 通过 vite/plugin-environment 插件来加载环境变量。该插件会在开发模式下将环境变量注入到 import.meta.env 对象中，并在构建生产版本时将环境变量替换为实际值。

// vite/plugin-environment  插件核心逻辑简化版
export default function environmentPlugin(config) {
  return {
    name: 'vite:environment',
    configResolved(config) {
      // ...
      const define = {
        'import.meta.env': JSON.stringify(env),
        // ...
      };
      config.define = { ...config.define, ...define };
    },
    // ...
  };
}

总结

通过掌握Vite的环境变量配置，你可以轻松地管理不同环境下的配置信息，提高开发效率，让你的项目更加灵活和易于维护！

#程序员##头条挑创作挑战赛#