前端环境变量：import.meta.env与process.env对比指南

1. 环境变量在前端开发中的核心作用

环境变量是现代前端工程化中不可或缺的配置管理方案。它们允许我们在不修改代码的情况下，根据不同的运行环境（开发、测试、生产）动态调整应用行为。想象一下，你正在开发一个电商网站：

• 开发环境需要连接本地Mock服务器
• 测试环境需要指向测试API网关
• 生产环境需要接入线上CDN

如果每次切换环境都要手动修改代码中的URL，不仅容易出错，还会导致代码库混乱。环境变量正是为解决这类问题而生。

2. import.meta.env：现代前端构建的标准接口

2.1 设计原理与工作机制

import.meta.env是ES模块(ESM)规范的一部分，由Vite等现代构建工具实现。当你在代码中写入import.meta.env.VITE_API_URL时，Vite会在构建过程中进行以下处理：

1. 解析项目根目录下的.env文件
2. 筛选出以VITE_开头的变量
3. 将这些变量静态替换到代码中
4. 移除未使用的环境变量（Tree Shaking）

这个过程发生在编译时，而非运行时。这意味着最终生成的代码中不会包含环境变量的动态查找逻辑，而是直接替换为具体的字符串值。

2.2 典型使用场景与最佳实践

2.2.1 基础配置示例

假设我们有一个Vue3+Vite项目，目录结构如下：

code复制project/
├── .env                # 全局默认配置
├── .env.development    # 开发环境覆盖配置
├── .env.production     # 生产环境覆盖配置
└── src/
    └── main.js

.env文件内容：

bash复制# 所有环境共享的默认值
VITE_APP_NAME=MyShop
VITE_API_TIMEOUT=5000

.env.development文件内容：

bash复制# 开发环境特定配置
VITE_API_BASE=http://localhost:3000/api
VITE_DEBUG_MODE=true

在代码中使用：

javascript复制// 获取API基础路径
const apiBase = import.meta.env.VI