從使用 Create React App 轉到 Vite,有很多不熟悉的地方,這篇文章簡單的對 Vite 在不同環境設定不同變數做簡單的筆記
不同的環境有不同的環境變數值是很正常的,ex 開發環境連開發環境的後端,正式環境 連正式的環境的後端,開發環境有開發環境的 api key,正式環境有正式環境的 api key, 之前用過 npm-config,處理過類似的需求,不過 Vite 自己就內建處理這類需求的方法
.env 文件
vite 預設有兩種環境:development(開發環境)、production(正式環境),先在根目錄下建立兩支程式 .env.development、.env.production,如下圖
.env 的內容大概長這樣,內容就是在不同環境會不一樣,要自行定義的值
注意,key 值需要用 VITE_ 開頭
才會讀的到
內建環境變量
Vite 有幾個內建的環境變量
- import.meta.env.MODE:
{string}
應用運作的模式。 - import.meta.env.BASE_URL:
{string}
部署應用程式時的基本 URL。 他由base 配置項決定。 - import.meta.env.PROD:
{boolean}
應用是否運行在生產環境(使用 NODE_ENV='production' 運行開發伺服器或建置應用程式時使用 NODE_ENV='production' )。 - import.meta.env.DEV:
{boolean}
應用是否運行在開發環境 (永遠與 import.meta.env.PROD相反)。 - import.meta.env.SSR:
{boolean}
應用程式是否運行在 server 上
直接來測試,在開發環境執行 npm run dev,用 console.log 將這些值印出來
就可以看到這是在 development 環境,如果是在正式環境就可以看到 import.meta.env.MODE 的值是 production
讀取設定值
舉例我要取得 .env.development 的 VITE_API_HOST 這個值
const apiHost = import.meta.env.VITE_API_HOST; // http://localhost:8085
這樣就簡單可以取得值
Build
一般執行
npm run build
建置後的結果是讀取 .env.production 這個檔案的環境變量
如果要建置讀取 .env.development 開發環境,可以執行
npm run build -- --mode development
兩個以上的環境
如果有兩個以上的環境,像是 qa 測試環境
- 建立 .env.qa 檔案
- 執行 npm run build -- --mode qa
這樣就會加載 .env.qa 的環境變量