認識環(huán)境變量
以最熟悉的 import.meta.env.BASE_URL 為例：
// router/index.js
const router = createRouter({
history: createWebHashHistory(import.meta.env.BASE_URL),
routes: [
// ...
]
})
該變量在：
- 開發(fā)環(huán)境中，默認值通常是 '/'
- 生產環(huán)境中，這個值可以根據(jù) vite.config.js 文件中的 base 配置項進行設置
Vite 其他內置環(huán)境變量：
- import.meta.env.MODE：獲取當前應用運行的模式
- import.meta.env.PROD：應用是否運行在生產環(huán)境
- import.meta.env.DEV：應用是否運行在開發(fā)環(huán)境
- import.meta.env.SSR：應用是否運行在 server 上
NODE_ENV和模式
代碼運行有不同的環(huán)境：
- 開發(fā)環(huán)境
- 測試環(huán)境
- 生產環(huán)境
不同的環(huán)境，需要不同的配置來滿足需求。
例如：
數(shù)據(jù)庫連接
- 開發(fā)環(huán)境：通常連接到本地數(shù)據(jù)庫或開發(fā)用的數(shù)據(jù)庫服務器，這些數(shù)據(jù)庫可能包含測試數(shù)據(jù)或模擬數(shù)據(jù)。
- 測試環(huán)境：連接到模擬真實運行狀態(tài)的測試數(shù)據(jù)庫，這些數(shù)據(jù)庫中的數(shù)據(jù)結構和生產環(huán)境一致，但數(shù)據(jù)通常是匿名化或專為測試準備的。
- 生產環(huán)境：連接到包含真實用戶數(shù)據(jù)的生產數(shù)據(jù)庫，且通常具有高可用性和額外的安全配置。
API密鑰和憑證
- 開發(fā)環(huán)境：可能使用具有限制權限的API密鑰，這些密鑰用于防止在開發(fā)過程中對真實數(shù)據(jù)造成影響。
- 測試環(huán)境：使用專為測試設計的密鑰，這些密鑰可能允許訪問更多的測試接口或模擬數(shù)據(jù)。
- 生產環(huán)境：使用具有完整訪問權限的API密鑰，這些密鑰通常需要嚴格保密，以保護應用和用戶數(shù)據(jù)的安全。
錯誤處理
- 開發(fā)環(huán)境：錯誤可能直接顯示詳細的堆棧信息，便于開發(fā)者快速定位問題。
- 測試環(huán)境：錯誤處理可能包括將錯誤詳細記錄到日志文件，同時顯示給定的錯誤消息以模擬生產環(huán)境的行為。
- 生產環(huán)境：錯誤處理旨在不泄露任何敏感信息，通常只提供一個用戶友好的錯誤消息和一個錯誤代碼，同時將詳細信息記錄在服務器的安全日志中。
如何指定代碼運行的環(huán)境呢？
一般可以通過 NODE_ENV 這個環(huán)境變量，該變量可以指定代碼的運行環(huán)境，比如 development、production 或 test
通過指定運行環(huán)境，從而能夠：
控制代碼行為：開發(fā)者可以根據(jù) NODE_ENV 的值在代碼中做一些判斷，從而執(zhí)行不同的邏輯
-
影響構建工具和庫：很多工具和庫也會根據(jù) NODE_ENV 不同的值有不同的行為
if (process.env.NODE_ENV === 'production') { // 生產環(huán)境的特定邏輯 } module.exports = { mode: 'development', // 其他配置... };
那 Vite 中的模式又是什么呢？
一句話總結：在 Vite 中，模式是一個可以在啟動時設置的屬性，用來指導 Vite 如何加載 .env 文件。
.env 的文件用來存放環(huán)境變量，之后在客戶端源碼中就可以通過 import.meta.env 來訪問對應的值。
另外，為了防止意外地將一些環(huán)境變量泄漏到客戶端，只有以 VITE_ 為前綴的變量才會暴露給經過 vite 處理的代碼。
例如：
.env
VITE_SOME_KEY=123
DB_PASSWORD=foobar
這里只有 VITE_SOME_KEY 會暴露給客戶端源碼：
console.log(import.meta.env.VITE_SOME_KEY) // "123"
console.log(import.meta.env.DB_PASSWORD) // undefined
.env 文件還可以有不同的類型：
.env # 所有情況下都會加載
.env.local # 所有情況下都會加載，但會被 git 忽略
.env.[mode] # 只在指定模式下加載
.env.[mode].local # 只在指定模式下加載，但會被 git 忽略
這里的 mode 指代的就是 Vite 里面的模式。
例如，我們可以在 .env.development 和 .env.production 文件中定義不同的環(huán)境變量，在使用 Vite 啟動應用的時候可以指定對應的模式加載對應的 .env 文件。
my-vite-project/
├── .env # 默認的環(huán)境變量
├── .env.development # 開發(fā)環(huán)境的環(huán)境變量
├── .env.production # 生產環(huán)境的環(huán)境變量
├── src/
│ └── main.js
└── vite.config.js
.env.development
VITE_API_URL=https://dev.api.example.com
DEBUG=true
.env.production
VITE_API_URL=https://api.example.com
DEBUG=false
之后使用 Vite 啟動應用的時候，就可以指定特定的模式，從而加載不同的 .env 文件
# 開發(fā)環(huán)境
vite --mode development
# 生產環(huán)境構建
vite build --mode production
思考??：為什么有了 NODE_DEV 還需要 mode 模式？
答案：NODE_DEV 是在 Node.js 環(huán)境中最早被支持的一個環(huán)境變量，廣泛的被用于各大工具和庫。而模式是特定于某個構建工具，主要就是用于更加細粒度的場景控制。也就是說，使用 mode 可以在不影響 NODE_DEV 的前提下具備更高的靈活性。
