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

一句话总区别

1. Webpack （vue-cli 也是）

   环境变量必须以 VUE_APP_ 开头

   访问方式：process.env.XXX

2. 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 个坑

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

---

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

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