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

一句话总区别

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

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

完整对比表（直接收藏）

逐点详细讲解（最关键）

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

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