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
Webpack

axios发送post请求,提交图片类型表单数据方法
下面小编就为大家分享一篇axios发送post请求,提交图片类型表单数据方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
Vue提示框组件vue-notification使用详解
这篇文章主要介绍了Vue提示框组件vue-notification使用详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-03-03
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
这篇文章主要介绍了移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下
2019-06-06
Vue中v-if与v-show的使用区别及应用场景解读
本文详细介绍了Vue开发中v-if和v-show的使用方法和性能区别,帮助开发者根据场景选择合适的条件渲染指令,v-if通过添加/移除DOM元素实现条件渲染,适用于不常切换的场景；v-show通过CSS控制显示/隐藏,适用于频繁切换的场景
2026-01-01
vue 使用Jade模板写html,stylus写css的方法
这篇文章主要介绍了vue 使用Jade模板写html，stylus写css的方法,文中还给大家提到了使用jade注意事项，需要的朋友可以参考下
2018-02-02
vue2.0开发实践总结之疑难篇
这篇文章主要为大家总结了vue2.0开发实践的疑难,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
Vue使用mounted和created时,this无法指向data中的数据问题
这篇文章主要介绍了Vue使用mounted和created时,this无法指向data中的数据问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
解决el-dialog与el-tabs一起用卡死的问题
在el-dialog中嵌入el-tabs和el-transfer时,关闭dialog会导致浏览器卡死,通过排查发现是destroy-on-close属性和el-tabs冲突导致的,解决方法是去掉destroy-on-close属性或给el-tabs添加v-if
2026-01-01
vue项目中如何使用mock你知道吗
这篇文章主要为大家介绍了vue项目如何使用mock，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2021-11-11
vue element-ui之怎么封装一个自己的组件的详解
这篇文章主要介绍了vue element-ui之怎么封装一个自己的组件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05