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_ 开头的变量**才会注入前端代码：

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

VITE_API_BASE=https://dev.api.com<br>
VITE_DEBUG=true<br>
DB_PASSWORD=secret123  ← 这行完全不会进打包产物

怎么让不同模式自动对应正确 .env 文件？

靠 package.json 中的脚本命令指定 --mode：

• "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 查找

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！