别再混用了！import.meta.env 和 process.env 到底差在哪？
一、前言
在前端工程化开发中，环境变量是区分开发/测试/生产环境、配置敏感信息的核心工具。长期以来，process.env是前端开发者最熟悉的环境变量载体，但随着Vite、Vue3、现代ES模块生态崛起，import.meta.env成为了新标准。
很多开发者会混淆两者的使用场景、底层原理和限制，本文将从核心定义、适用环境、使用方式、底层差异、实战示例五个维度，彻底讲清import.meta.env和process.env的区别，帮你在项目中精准选择、避免踩坑。
二、核心概念先理清
1.process.env
归属：Node.js原生环境变量对象，属于CommonJS规范
载体：运行在Node.js环境中（Webpack、VueCLI、CreateReactApp等基于Node.js的构建工具）
本质：Node.js提供的全局变量，存储操作系统/项目配置的环境变量
适用工具：Webpack、VueCLI、CRA等基于Node.js构建的传统前端项目
2.import.meta.env
归属：ESModules(ESM)规范的环境变量对象，是浏览器原生支持的标准
载体：Vite、Rollup等现代构建工具（基于ESM原生模块）
本质：ESM标准扩展的元属性，专门用于在前端代码中访问环境变量
适用工具：Vite、Vue3+Vite、React+Vite等现代ESM构建工具
三、核心区别对比（表格速览）
四、实战代码示例
示例1：process.env用法（VueCLI/Webpack项目）
1.配置环境变量文件
根目录创建.env.development（开发环境）、.env.production（生产环境）：
2.如何使用
关键说明：
Webpack会在构建时将process.env.xxx替换为真实值
无需前缀，自定义变量名即可使用
仅在基于Node.js的构建工具中生效
示例2：import.meta.env用法（Vite项目）
1.配置环境变量文件
根目录创建.env、.env.local、.env.production，Vite强制自定义变量以VITE_开头：
2.如何使用
关键说明：
自定义变量必须加VITE_前缀，否则无法被Vite识别
Vite提供内置变量：MODE/DEV/PROD/SSR
完全遵循ESM规范，兼容性更强
五、底层核心差异深度解析
1.规范与兼容性
process.env是Node.js专属，脱离Node.js环境（纯浏览器、Deno等）无法使用，属于非标准的“前端妥协方案”；import.meta.env是ES模块官方标准，所有支持ESM的环境（浏览器、Node.js、Deno）都能兼容，是未来前端的主流方案。
2.变量安全性
process.env会暴露所有注入的变量，若不慎泄露敏感信息，无天然防护；
import.meta.env（Vite）通过VITE_前缀做隔离，仅暴露前缀变量，避免敏感配置泄露。
3.类型安全
process.env无内置类型，TypeScript项目需手动编写d.ts类型定义；
import.meta.env（Vite）自动生成类型，IDE直接提示，零配置支持TS。
4.模块化限制
process.env无代码位置限制，全局可用；import.meta.env仅能在ES模块（import/export）中使用，严格遵循模块化规范。
六、如何选择？一句话总结
老项目/Webpack/VueCLI→用process.env（无需改造，兼容现有代码）；
新项目/Vite/Vue3/React现代栈→用import.meta.env（标准、安全、类型友好）；
跨构建工具兼容→可封装工具函数统一调用，避免硬编码耦合。
七、总结
process.env是Node.js产物，适配传统Webpack生态，无变量前缀限制；
import.meta.env是ESM标准，适配Vite现代生态，必须用VITE_前缀；
新项目优先使用import.meta.env，符合前端规范，更安全、更易维护；
两者核心作用一致：注入环境变量、区分运行环境，只是底层规范和适用场景不同。
地址
上海市宝山区环上大科技园一号基地3号楼501
电话
400-021-8857 || 18721443587
邮箱
shanghaiyanbo@yanboo.com.cn
COPYRIGHT © YANBOOT All RIGHT RESERVED 沪ICP备2024063769号-1
