Vite 环境变量与 macOS Shell 环境变量完全隔离，仅通过项目根目录的 .env* 文件（如 .env.development、.env.production）加载，且仅 VITE_ 开头的变量才会注入 import.meta.env；Shell 中 export 设置对 Vite 无效，无需配置系统级环境变量。
macos 上的 shell 环境变量（如 path、node_env）和 vite 的环境变量是两套独立机制，不能混用。vite 不读取 macos shell 的 export var=value 设置，它只认项目根目录下的 .env* 文件。直接在终端里 export vite_api_base=https://api.dev 对 vite 无效，也不会出现在 import.meta.env 中。
Shell 环境变量该配什么？
只需确保 Node.js 和 npm 可执行即可，Vite 本身不需要额外 Shell 变量：
-
Node.js 路径：确认
node和npx命令可用（通常通过 nvm 或 Homebrew 安装后自动加入PATH） -
避免全局安装 Vite：推荐用
npx vite或npm run dev，不依赖 Shell 的VITE_*变量 -
敏感配置别放 Shell：比如
export API_KEY=xxx是危险操作——Shell 变量可能被子进程继承、出现在进程列表或日志中
Vite 真正该配的环境变量在哪？
全部放在项目根目录的 .env.* 文件里，Vite 启动时自动加载：
-
.env：通用默认值（不建议放具体地址） -
.env.development：开发时生效（vite或vite dev默认用这个） -
.env.staging：测试/预发环境（需加--mode staging） -
.env.production：生产构建时生效（vite build默认用这个）
每个文件中，**只有以 VITE_ 开头的变量**才会注入前端代码：
VITE_API_BASE=https://dev.api.com<br> VITE_DEBUG=true<br> DB_PASSWORD=secret123 ← 这行完全不会进打包产物
怎么让不同模式自动对应正确 .env 文件？
靠 package.json 中的脚本命令指定 --mode：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
-
"dev": "vite"→ 自动加载.env.development -
"build:stage": "vite build --mode staging"→ 加载.env.staging -
"preview:prod": "vite preview --mode production"→ 加载.env.production
无需修改 macOS 的 ~/.zshrc 或设置 Shell 变量，Vite 内部已按规则优先级合并（.env.${mode}.local > .env.${mode} > .env.local > .env）。
立即学习“前端免费学习笔记（深入）”；
需要动态读取 Shell 变量？极少数场景可桥接
例如 CI/CD 中由部署平台注入变量，可在 vite.config.ts 中手动加载：
- 用 Vite 提供的
loadEnv()函数读取当前 mode 下的.env文件 - 若真需 Shell 变量（如 Jenkins 传入的
DEPLOY_ENV），应在构建前写入临时.env文件，而不是靠process.env注入 - 切记：
import.meta.env是编译期静态注入，不是运行时 Shell 查找
