快捷導(dǎo)航

Vite 與 Webpack 開(kāi)發(fā)/打包時(shí)環(huán)境變量對(duì)比分析

更新時(shí)間：2026年04月13日 10:10:04 作者：五味子1314

Webpack和Vite在環(huán)境變量的處理上有顯著區(qū)別,主要體現(xiàn)在變量前綴、訪問(wèn)方式、內(nèi)置環(huán)境變量、配置文件使用、注入原理以及熱更新感知等方面,本文介紹Vite與Webpack開(kāi)發(fā)/打包時(shí)環(huán)境變量對(duì)比分析,感興趣的朋友一起看看吧

一句話總區(qū)別

Webpack（vue-cli 也是）
- 環(huán)境變量必須以 VUE_APP_ 開(kāi)頭
- 訪問(wèn)方式：process.env.XXX
Vite
- 環(huán)境變量必須以 VITE_ 開(kāi)頭
- 訪問(wèn)方式：import.meta.env.XXX

這是最本質(zhì)、最底層的兩個(gè)區(qū)別。

完整對(duì)比表（直接收藏）

對(duì)比項(xiàng)	Webpack / vue-cli	Vite
環(huán)境變量前綴	`VUE_APP_`	`VITE_`
客戶端訪問(wèn)方式	`process.env.VUE_APP_XXX`	`import.meta.env.VITE_XXX`
內(nèi)置默認(rèn)變量	`process.env.NODE_ENV`	`import.meta.env.MODE / PROD / DEV`
環(huán)境文件	`.env`, `.env.development`, `.env.production`	一樣：`.env`, `.env.development`, `.env.production`
環(huán)境文件加載時(shí)機(jī)	啟動(dòng)時(shí)加載	啟動(dòng)時(shí)加載
能否在 `vite.config.ts / vue.config.js` 中使用	? 可以直接用 `process.env`	? 不可以，必須用 `loadEnv` 手動(dòng)加載
服務(wù)端/配置文件使用	天然支持	需手動(dòng)加載
注入原理	打包時(shí)字符串替換	利用 ES 模塊 `import.meta` 對(duì)象
是否支持 CommonJS	是	否（ESM 規(guī)范）
熱更新感知	修改 .env 需重啟服務(wù)	修改 .env 需重啟服務(wù)

逐點(diǎn)詳細(xì)講解（最關(guān)鍵）

1. 變量前綴不同

Webpack：必須 VUE_APP_XXX
Vite：必須 VITE_XXX

不按規(guī)則寫(xiě) → 客戶端獲取不到！

2. 訪問(wèn)方式完全不同

Webpack

console.log(process.env.VUE_APP_API_URL)

Vite

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

不能混用！

Vite 里寫(xiě) process.env → 直接報(bào)錯(cuò)
Webpack 里寫(xiě) import.meta.env → 報(bào)錯(cuò)

3. 內(nèi)置環(huán)境變量不同

Webpack 自帶

process.env.NODE_ENV
process.env.BASE_URL

Vite 自帶

import.meta.env.MODE      環(huán)境模式
import.meta.env.PROD     是否生產(chǎn)
import.meta.env.DEV      是否開(kāi)發(fā)
import.meta.env.BASE_URL 基礎(chǔ)路徑

4. 配置文件中使用環(huán)境變量（最大坑點(diǎn)）

Webpack

直接用，天然支持：

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

Vite

不能直接用！
必須用 loadEnv 手動(dòng)加載：

// 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 編譯時(shí)替換成字符串
Vite
- 利用 ESM 規(guī)范的 import.meta 注入環(huán)境變量
- 是標(biāo)準(zhǔn) ES 語(yǔ)法

6. 環(huán)境文件格式

兩者完全一樣：

.env                所有環(huán)境都加載
.env.development     開(kāi)發(fā)環(huán)境
.env.production      生產(chǎn)環(huán)境

最容易踩的 4 個(gè)坑

Vite 不能用 process.env → 報(bào)錯(cuò) is not defined
變量不加 VITE_ / VUE_APP_ → 客戶端拿不到
vite.config.ts 里直接寫(xiě) import.meta.env → 拿不到，必須 loadEnv
修改 .env 不重啟服務(wù) → 不生效

最終極簡(jiǎn)記憶（10 秒記住）

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

到此這篇關(guān)于Vite 與 Webpack 開(kāi)發(fā)/打包時(shí)環(huán)境變量對(duì)比的文章就介紹到這了,更多相關(guān)Vite 與 Webpack對(duì)比內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: