前言

? ? 我們開發(fā)中不可避免的要根據(jù)環(huán)境變量來做一些邏輯分支，在vite中有兩種實現(xiàn)方式，即define和.env文件

示例

? ? 通過cross-env包設(shè)置環(huán)境變量，并通過define向頁面中export

? ? 在.env中使用VITE_作為開頭命名

源碼

? ? define

? ? ? ? 讀取配置的整體流程和proxy差不多，這里就不展開說了，總之就是，能拿到vite.config.js中的配置

? ? ? ? 開發(fā)環(huán)境

? ? ? ? ? ? 對于開發(fā)環(huán)境vite并不會進行編譯，而是將其掛載到全局，我們知道，定義在后的script標簽是能夠訪問上一個script中定義的變量的，就像下邊這樣

? ? ? ? ????為了避免變量名稱沖突導(dǎo)致報錯，故掛載到window最合適

? ? ? ? ????那么，需要單獨創(chuàng)建script標簽嗎？可以，但不必要！因為vite已經(jīng)向瀏覽器塞了個client.js了，直接利用其作為載體即可，這里將define中定義的配置項轉(zhuǎn)換成字符串，并對原代碼中的占位標識（__DEFINES__）作替換

? ? ? ? ? ? 最后，當瀏覽器加載到client.js時，直接將__DEFINES__的值掛載到window即可

? ??????非開發(fā)環(huán)境

? ? ? ? ? ? 非開發(fā)環(huán)境會使用plugin對源碼中使用到的變量做替換操作：

? ? ? ? ? ? ????將我們的配置轉(zhuǎn)換為正則表達式

? ? ? ? ? ? ????對源碼作匹配替換

? ??env文件

? ? ? ? 讀取配置

? ? ? ? ????本質(zhì)上，該文件也屬于配置項，故也在resolveConfig中進行拉取

? ? ? ? ????對于loadEnv函數(shù)，接收的三個參數(shù)分別為：當前運行環(huán)境（devlepment or production）、是否配置是env的目錄（默認根目錄下）、是否設(shè)置了前綴（默認以VITE_開頭）

? ? ? ? ????然后借助dotenv包對文件內(nèi)容做解析

? ? ? ? ????最后將解析到的值掛載到env對象上并返回

? ??????掛載