loadEnv 又是什么

loadEnv 是 Vite 提供的一个内置工具函数，用于在 Node.js 环境（如 Vite 配置文件 vite.config.js 或自定义脚本）中手动加载 .env 文件中的环境变量。

它和前端代码中使用的 import.meta.env 不同 —— loadEnv 是在 构建时/服务端运行的脚本中 使用的，比如配置 Vite 本身、设置代理、动态生成配置等。

🔧 1. loadEnv 的作用

• 在 Node.js 上下文（如 vite.config.js）中读取 .env 文件；
• 支持根据当前 mode（模式） 自动加载对应的 .env 文件（如 .env.development）；
• 返回一个包含环境变量的对象（只包含以 VITE_ 开头的变量？不！它可以读取所有变量，但通常你只关心需要用于配置的那些）。

✅ 注意：loadEnv 本身不限制前缀（不像前端只能用 VITE_），所以你可以读取任意命名的变量（例如数据库密码），但这些变量不会暴露给前端。

📦 2. 基本用法

在 vite.config.js 中使用：

// vite.config.js
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig(({ command, mode }) => {
  // 加载对应 mode 的 .env 文件
  const env = loadEnv(mode, process.cwd())

  console.log('API 地址:', env.VITE_API_URL)
  console.log('后端密钥（仅服务端可见）:', env.DB_PASSWORD)

  return {
    plugins: [vue()],
    server: {
      proxy: {
        '/api': {
          target: env.VITE_API_URL || 'http://localhost:3000',
          changeOrigin: true
        }
      }
    }
  }
})

.env 文件示例：

# .env.development
VITE_API_URL=https://dev-api.example.com
DB_PASSWORD=secret123   # 这个不会暴露给前端！

✅ DB_PASSWORD 只在 vite.config.js 这类 Node 脚本中可用，前端代码无法访问。

📁 3. loadEnv 的参数说明

loadEnv(mode, envDir, prefixes)

💡 实际上，loadEnv 默认会加载所有变量（不管前缀），但官方建议只使用 VITE_ 前缀的变量用于前端。非 VITE_ 的变量可用于服务端配置（如代理、插件等）。

🆚 与 dotenv 的区别

✅ 如果你在 Vite 项目中，优先使用 loadEnv，因为它更智能、与 Vite 模式集成更好。

⚠️ 常见误区

1. loadEnv 不是用来在 Vue 组件里读取变量的！
   → 组件里请用 import.meta.env.VITE_xxx。

2. loadEnv 读取的变量不会自动变成 import.meta.env 的一部分
   → 它只是返回一个普通对象，用于配置构建或服务端逻辑。

3. 非 VITE_ 前缀的变量不会暴露给前端
   → 所以可以安全地在 vite.config.js 中使用密钥（只要不把它传给前端）。

✅ 总结

如果你正在写 Vite 插件、配置代理、动态设置构建选项，loadEnv 就是你的好帮手！