前言

這是一個(gè)前端構(gòu)建環(huán)境里非常核心、也非常容易混淆的問(wèn)題。下面我們從來(lái)源、使用場(chǎng)景、編譯時(shí)機(jī)、安全性四個(gè)維度來(lái)談?wù)?import.meta.env 和 process.env 的區(qū)別。

一句話結(jié)論

process.env 是 Node.js 的環(huán)境變量接口 import.meta.env 是 Vite（ESM）在構(gòu)建期注入的前端環(huán)境變量

一、process.env是什么？

本質(zhì)

• 來(lái)自 Node.js
• 運(yùn)行時(shí)讀取 服務(wù)器 / 構(gòu)建機(jī)的系統(tǒng)環(huán)境變量
• 本身 瀏覽器里不存在

console.log(process.env.NODE_ENV);

使用場(chǎng)景

• Node 服務(wù)
• 構(gòu)建工具（Webpack / Vite / Rollup）
• SSR（Node 端）

前端能不能用？

?? 不能直接用

瀏覽器里沒(méi)有 process：

// 瀏覽器原生環(huán)境 ?
Uncaught ReferenceError: process is not defined

為什么 Webpack 項(xiàng)目里能用？

因?yàn)?Webpack 幫你“編譯期替換”了

process.env.NODE_ENV
// ?? 構(gòu)建時(shí)被替換成
"production"

本質(zhì)是 字符串替換，不是運(yùn)行時(shí)讀取。

二、import.meta.env是什么？

本質(zhì)

• Vite 提供
• 基于 ES Module 的 import.meta
• 構(gòu)建期 + 運(yùn)行期可用（但值是構(gòu)建期確定的）

console.log(import.meta.env.MODE);

特點(diǎn)

• 瀏覽器里 原生支持
• 不依賴 Node 的 process
• 更符合現(xiàn)代 ESM 規(guī)范

三、兩者核心區(qū)別對(duì)比（重點(diǎn)）

?? 兩者都不是“前端運(yùn)行時(shí)讀取服務(wù)器環(huán)境變量”

四、Vite 中為什么不用process.env？

因?yàn)?Vite 不再默認(rèn)注入process

// Vite 項(xiàng)目中 ?
process.env.API_URL

會(huì)直接報(bào)錯(cuò)。

官方設(shè)計(jì)選擇

• 避免 Node 全局污染
• 更貼近瀏覽器真實(shí)環(huán)境
• 更利于 Tree Shaking

五、Vite 環(huán)境變量的正確用法（非常重要）

必須以VITE_開(kāi)頭

# .env
VITE_API_URL=https://api.example.com
console.log(import.meta.env.VITE_API_URL);

? 否則 不會(huì)注入到前端

內(nèi)置變量

import.meta.env.MODE        // development / production
import.meta.env.DEV         // true / false
import.meta.env.PROD        // true / false
import.meta.env.BASE_URL

六、安全性

重要警告

import.meta.env 里的變量 ≠ 私密

它們會(huì)：

• 被 打進(jìn) JS Bundle
• 可在 DevTools 直接看到

不要這樣做

VITE_SECRET_KEY=xxxx

正確做法

• 前端：只放“公開(kāi)配置”（API 域名、開(kāi)關(guān)）
• 私密變量：只放在 Node / 服務(wù)端

七、SSR / 全棧項(xiàng)目里怎么區(qū)分？

在 Vite + SSR（如 Nuxt / 自建 SSR）：

Node 端

process.env.DB_PASSWORD

瀏覽器端

import.meta.env.VITE_API_URL

兩套環(huán)境變量是刻意分開(kāi)的。

為什么必須分成兩套？（設(shè)計(jì)原因）

執(zhí)行環(huán)境不同（這是根因）

瀏覽器里 永遠(yuǎn)不可能安全地訪問(wèn)服務(wù)器環(huán)境變量。

SSR ≠ 瀏覽器

很多人誤解：

“SSR 是不是瀏覽器代碼先在 Node 跑一遍？”

? 不完全對(duì)

SSR 實(shí)際是：

Node.js 先跑一份 → 生成 HTML
瀏覽器再跑一份 → hydrate

這兩次執(zhí)行：

• 環(huán)境不同
• 變量來(lái)源不同
• 安全級(jí)別不同

在 Vite + SSR 中，變量的“真實(shí)流向”

Node 端（SSR Server）

// server.ts / entry-server.ts
const dbPassword = process.env.DB_PASSWORD;

?? 真實(shí)運(yùn)行時(shí)讀取

?? 不會(huì)進(jìn) bundle

?? 只存在于服務(wù)器內(nèi)存

Client 端（瀏覽器）

// entry-client.ts / React/Vue 組件
const apiUrl = import.meta.env.VITE_API_URL;

?? 構(gòu)建期注入

?? 會(huì)打進(jìn) JS

?? 用戶可見(jiàn)

中間那條“禁止通道”

// ? 絕對(duì)禁止
process.env.DB_PASSWORD → 瀏覽器

SSR 不會(huì)、也不允許，自動(dòng)幫你“透?jìng)?rdquo;環(huán)境變量

SSR 中最容易踩的 3 個(gè)坑（重點(diǎn)）

坑 1：在“共享代碼”里直接用process.env

// utils/config.ts（被 server + client 共用）
export const API = process.env.API_URL; // ?

問(wèn)題：

• Server OK
• Client 直接炸（或被錯(cuò)誤替換）

? 正確方式：

export const API = import.meta.env.VITE_API_URL;

或者：

export const API =typeof window === 'undefined'
    ? process.env.INTERNAL_API
    : import.meta.env.VITE_API_URL;

坑 2：誤以為 SSR 可以“順手用數(shù)據(jù)庫(kù)變量”

// Vue/React 組件里
console.log(process.env.DB_PASSWORD); // ?

哪怕你在 SSR 模式下，這段代碼：

• 最終仍會(huì)跑在瀏覽器
• 會(huì)被打包
• 是嚴(yán)重安全漏洞

坑 3：把“環(huán)境變量”當(dāng)成“運(yùn)行時(shí)配置”

// ? 想通過(guò)部署切換 API
import.meta.env.VITE_API_URL

?? 這是 構(gòu)建期值：

build 時(shí)確定
→ CDN 緩存
→ 所有用戶共享

想運(yùn)行期切換？只能：

• 接口返回配置
• HTML 注入 window.CONFIG
• 拉 JSON 配置文件

SSR 項(xiàng)目里“正確的分層模型”（工程視角）

┌──────────────────────────┐
│        瀏覽器 Client       │
│  import.meta.env.VITE_*   │ ← 公開(kāi)配置
└───────────▲──────────────┘
            │
        HTTP / HTML
            │
┌───────────┴──────────────┐
│        Node SSR Server     │
│      process.env.*        │ ← 私密配置
└───────────▲──────────────┘
            │
        內(nèi)部訪問(wèn)
            │
┌───────────┴──────────────┐
│        DB / Redis / OSS    │
└──────────────────────────┘

這是一條 單向、安全的數(shù)據(jù)流。

Nuxt / 自建 SSR 的對(duì)應(yīng)關(guān)系

?? Nuxt 本質(zhì)也是在幫你維護(hù)這條邊界

八、常見(jiàn)誤區(qū)總結(jié)

誤區(qū) 1

import.meta.env 是運(yùn)行時(shí)讀取

? 錯(cuò)，仍是構(gòu)建期注入

誤區(qū) 2

可以用它動(dòng)態(tài)切換環(huán)境

? 不行，想動(dòng)態(tài)只能：

• 接口返回配置
• 或運(yùn)行時(shí)請(qǐng)求 JSON

誤區(qū) 3

Vite 里還能繼續(xù)用 process.env

? 除非你手動(dòng) polyfill（不推薦）

九、總結(jié)

• 前端（Vite）只認(rèn) import.meta.env.VITE_*
• 服務(wù)端（Node）只認(rèn) process.env
• 永遠(yuǎn)不要把秘密放進(jìn)前端 env

到此這篇關(guān)于import.meta.env和process.env區(qū)別的文章就介紹到這了,更多相關(guān)import.meta.env和process.env區(qū)別內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論