Vite 与 Webpack 开发/打包时环境变量对比分析

更新时间：2026年04月13日 10:10:04 作者：五味子1314

Webpack和Vite在环境变量的处理上有显著区别,主要体现在变量前缀、访问方式、内置环境变量、配置文件使用、注入原理以及热更新感知等方面,本文介绍Vite与Webpack开发/打包时环境变量对比分析,感兴趣的朋友一起看看吧

一句话总区别

Webpack（vue-cli 也是）
- 环境变量必须以 VUE_APP_ 开头
- 访问方式：process.env.XXX
Vite
- 环境变量必须以 VITE_ 开头
- 访问方式：import.meta.env.XXX

这是最本质、最底层的两个区别。

完整对比表（直接收藏）

对比项	Webpack / vue-cli	Vite
环境变量前缀	`VUE_APP_`	`VITE_`
客户端访问方式	`process.env.VUE_APP_XXX`	`import.meta.env.VITE_XXX`
内置默认变量	`process.env.NODE_ENV`	`import.meta.env.MODE / PROD / DEV`
环境文件	`.env`, `.env.development`, `.env.production`	一样：`.env`, `.env.development`, `.env.production`
环境文件加载时机	启动时加载	启动时加载
能否在 `vite.config.ts / vue.config.js` 中使用	✅ 可以直接用 `process.env`	❌ 不可以，必须用 `loadEnv` 手动加载
服务端/配置文件使用	天然支持	需手动加载
注入原理	打包时字符串替换	利用 ES 模块 `import.meta` 对象
是否支持 CommonJS	是	否（ESM 规范）
热更新感知	修改 .env 需重启服务	修改 .env 需重启服务

逐点详细讲解（最关键）

1. 变量前缀不同

Webpack：必须 VUE_APP_XXX
Vite：必须 VITE_XXX

不按规则写 → 客户端获取不到！

2. 访问方式完全不同

Webpack

console.log(process.env.VUE_APP_API_URL)

Vite

console.log(import.meta.env.VITE_API_URL)

不能混用！

Vite 里写 process.env → 直接报错
Webpack 里写 import.meta.env → 报错

3. 内置环境变量不同

Webpack 自带

process.env.NODE_ENV
process.env.BASE_URL

Vite 自带

import.meta.env.MODE      环境模式
import.meta.env.PROD     是否生产
import.meta.env.DEV      是否开发
import.meta.env.BASE_URL 基础路径

4. 配置文件中使用环境变量（最大坑点）

Webpack

直接用，天然支持：

// vue.config.js
console.log(process.env.VUE_APP_API_URL)

Vite

不能直接用！
必须用 loadEnv 手动加载：

// vite.config.ts
import { defineConfig, loadEnv } from 'vite'
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  console.log(env.VITE_API_URL) // 必须这样拿
  return { plugins: [] }
})

5. 注入原理不同

Webpack
- 把 process.env.XXX 编译时替换成字符串
Vite
- 利用 ESM 规范的 import.meta 注入环境变量
- 是标准 ES 语法

6. 环境文件格式

两者完全一样：

.env                所有环境都加载
.env.development     开发环境
.env.production      生产环境

最容易踩的 4 个坑

Vite 不能用 process.env → 报错 is not defined
变量不加 VITE_ / VUE_APP_ → 客户端拿不到
vite.config.ts 里直接写 import.meta.env → 拿不到，必须 loadEnv
修改 .env 不重启服务 → 不生效

最终极简记忆（10 秒记住）

Webpack = process.env + VUE_APP_
Vite = import.meta.env + VITE_
配置文件里：webpack 直接用，vite 要 loadEnv

到此这篇关于Vite 与 Webpack 开发/打包时环境变量对比的文章就介绍到这了,更多相关Vite 与 Webpack对比内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vite项目中打包环境变量教程

Vite
Webpack

VUE 实现复制内容到剪贴板的两种方法
这篇文章主要介绍了VUE 实现复制内容到剪贴板功能，本文通过两种方法，给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2019-04-04
vue elementUI实现自定义正则规则验证
本文主要介绍了vue elementUI实现自定义正则规则验证，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
vue.js diff算法原理详细解析
这篇文章主要介绍了vue.js diff算法原理详细解析，diff算法可以看作是一种对比算法，对比的对象是新旧虚拟Dom。顾名思义，diff算法可以找到新旧虚拟Dom之间的差异，但diff算法中其实并不是只有对比虚拟Dom，还有根据对比后的结果更新真实Dom
2022-06-06
vue连接本地服务器的实现示例
本文主要介绍了vue连接本地服务器的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2024-01-01
vue导出excel的两种实现方式代码
这篇文章主要给大家介绍了关于vue导出excel的两种实现方式,在项目中我们可能会碰到导出Excel文件的需求,文中给出了详细的代码示例,需要的朋友可以参考下
2023-08-08
详解vue-cli3多环境打包配置
这篇文章主要介绍了vue-cli3多环境打包配置，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-03-03
vue3声明响应式状态使用(含ref,reactive,toRef(),toRefs()等)
这篇文章主要介绍了vue3声明响应式状态使用(含ref,reactive,toRef(),toRefs()等),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
vxe-table 实现行高拖拽功能示例详解
vxe-table实现行高拖拽功能,需更新到最新版本,通过row-config.resizable和row-resize启用,多列允许触发行高拖拽时,通过row-resize指定任意列,感兴趣的朋友跟随小编一起看看吧
2025-01-01
Vue中computed(计算属性)和watch(监听属性)的用法及区别说明
这篇文章主要介绍了Vue中computed(计算属性)和watch(监听属性)的用法及区别说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
vue实现微信分享朋友圈,发送朋友的示例讲解
下面小编就为大家分享一篇vue实现微信分享朋友圈,发送朋友的示例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02