Vite 在特殊的 import.meta.env 對(duì)象下暴露了一些常量。這些常量在開(kāi)發(fā)階段被定義為全局變量，并在構(gòu)建階段被靜態(tài)替換，以使樹(shù)搖（tree-shaking）更有效。

一、內(nèi)置常量

一些內(nèi)置常量在所有情況下都可用

• import.meta.env.MODE: {string} 應(yīng)用運(yùn)行的模式。

• import.meta.env.BASE_URL: {string} 部署應(yīng)用時(shí)的基本 URL。他由base 配置項(xiàng)決定。

• import.meta.env.PROD: {boolean} 應(yīng)用是否運(yùn)行在生產(chǎn)環(huán)境（使用 NODE_ENV='production' 運(yùn)行開(kāi)發(fā)服務(wù)器或構(gòu)建應(yīng)用時(shí)使用 NODE_ENV='production' ）。

• import.meta.env.DEV: {boolean} 應(yīng)用是否運(yùn)行在開(kāi)發(fā)環(huán)境 (永遠(yuǎn)與 import.meta.env.PROD相反)。

• import.meta.env.SSR: {boolean} 應(yīng)用是否運(yùn)行在 server 上。

二、環(huán)境變量

Vite 自動(dòng)將環(huán)境變量暴露在 import.meta.env 對(duì)象下，作為字符串。
為了防止意外地將一些環(huán)境變量泄漏到客戶端，只有以 VITE_ 為前綴的變量才會(huì)暴露給經(jīng)過(guò) vite 處理的代碼。例如下面這些環(huán)境變量

創(chuàng)建環(huán)境變量文件

.env                # 所有情況下都會(huì)加載
.env.local          # 所有情況下都會(huì)加載，但會(huì)被 git 忽略
.env.[mode]         # 只在指定模式下加載
.env.[mode].local   # 只在指定模式下加載，但會(huì)被 git 忽略

創(chuàng)建 .env 文件

# 公共基礎(chǔ)路徑, 詳見(jiàn): https://cn.vitejs.dev/guide/build.html#public-base-path
VITE_BASE_URL = /

#API 接口路徑前綴
VITE_BASE_API_URL = /

#是否清空掉代碼中的 console
VITE_DROP_CONSOLE = true

創(chuàng)建 .env.development 文件

# 公共基礎(chǔ)路徑, 詳見(jiàn): https://cn.vitejs.dev/guide/build.html#public-base-path
VITE_BASE_URL = /

#API 接口路徑前綴
VITE_BASE_API_URL = /

#是否清空掉代碼中的 console
VITE_DROP_CONSOLE = false

創(chuàng)建 .env.production 文件

# 公共基礎(chǔ)路徑, 詳見(jiàn): https://cn.vitejs.dev/guide/build.html#public-base-path
VITE_BASE_URL = /

#API 接口路徑前綴
VITE_BASE_API_URL = /

#是否清空掉代碼中的 console
VITE_DROP_CONSOLE = true

三、TypeScript 的智能提示

默認(rèn)情況下，Vite 在 vite/client.d.ts 中為 import.meta.env 提供了類(lèi)型定義。隨著在 .env[mode] 文件中自定義了越來(lái)越多的環(huán)境變量，你可能想要在代碼中獲取這些以 VITE_ 為前綴的用戶自定義環(huán)境變量的 TypeScript 智能提示
要想做到這一點(diǎn)，你可以在 type 目錄下創(chuàng)建一個(gè)vite-client.d.ts 文件，接著按下面這樣增加 ImportMetaEnv 的定義

/// <reference types="vite/client" />

interface ImportMetaEnv {
    /** 網(wǎng)站部署的目錄 (公共基礎(chǔ)路徑) */
    readonly VITE_BASE_URL: string;
    /** API 接口路徑前綴 */
    readonly VITE_BASE_API_URL: string;
    /** 是否清空掉代碼中的 console */
    readonly VITE_DROP_CONSOLE: string;
    // 更多環(huán)境變量...
}

interface ImportMeta {
    readonly env: ImportMetaEnv;
}