前端获取环境变量方式区分(Vite)

loadEnv,process.env,import.meta.env这三个虽然都涉及到"环境变量",但它们在使用场景和作用上有明显不同

1. process.env

  • 作用场景:仅在 Node.js 环境中使用,比如在 vite.config.ts、服务器端脚本或 Node.js 项目中。
  • 来源 :系统级别或命令行工具(例如 cross-env)设置的环境变量。
  • 特点:运行时动态获取,不会经过编译时的替换,包含了你启动命令传入的变量,但不会自动注入到客户端代码中。

2. loadEnv

  • 作用场景:在 Vite 配置文件(vite.config.ts)中使用,它是 Vite 提供的工具函数。
  • 来源 :从项目 根目录的 .env 文件(如 .env、.env.development、.env.production)中读取并解析环境变量。
  • 特点 :只会加载 .env 文件中定义的变量,并返回一个对象。loadEnv 是在构建/启动时运行的,它不包含通过 cross-env 直接设置在 process.env 中的变量,除非你手动合并。

3. import.meta.env

  • 作用场景 :用于客户端(浏览器端)的代码中,比如你的 Vue 组件 或者其他前端文件
  • 来源 :在 Vite 构建过程中,Vite 会把符合条件的环境变量(需要以 VITE_ 开头 )注入到客户端代码的 import.meta.env 中。
  • 特点:这些变量在构建时被静态替换,保证了构建后的代码可以直接使用环境配置,同时只暴露了允许暴露给客户端的变量。

关系图示

css 复制代码
    A[系统/命令行环境变量] -->|cross-env| B[process.env]
    B -->|在 Node 环境中使用| C[vite.config.ts]
    C -->|调用 loadEnv 读取 .env 文件| D[.env / .env.development / ...]
    D -->|返回结果供配置使用| E[loadEnv() 返回对象]
    C -->|结合 process.env (手动合并)| F[最终环境变量对象]
    F -->|在构建过程中注入| G[import.meta.env (客户端)]

小结

  • process.env:Node.js 中真实存在的环境变量集合,通常由操作系统或 cross-env 设置。
  • loadEnv() :Vite 的工具函数,用来加载 .env 文件中的变量,主要在 Vite 配置时使用。
  • import.meta.env :构建后暴露给前端代码的环境变量,必须以 VITE_ 开头,经过 Vite 静态替换。

它们虽然都与环境变量相关,但使用场景和生命周期不同,并不是一个东西,而是实现环境变量管理的不同层次和阶段。

相关推荐
Oriel1 分钟前
在 Strapi v4 中生成专业 API 文档
前端·后端
WildBlue2 分钟前
解锁 Babel - JSX 编译:前端魔法背后的秘密🥳
前端·react.js
南方kenny2 分钟前
React 魔法揭秘:useRef 与 forwardRef 的奇妙之旅
前端·javascript·react.js
LaoZhangAI4 分钟前
Playwright MCP完整指南:AI驱动的浏览器自动化测试革命2025
前端·后端
前端Hardy5 分钟前
Python 打造 Excel 到 JSON 转换工具:从开发到打包全攻略
前端·后端·python
guiyanakaung6 分钟前
CMP 如何优雅的实现跨软件的拖拽功能
前端·github
海上生明月丿10 分钟前
Vue 工程化
前端·javascript·vue.js
李文旺40 分钟前
MVVM & compose
前端
李文旺43 分钟前
[React]受控组件与非受控组件
前端·react.js
格调UI成品2 小时前
元宇宙工厂前端新形态:Three.js与WebGL实现3D产线交互的轻量化之路
前端·javascript·webgl