從使用 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 的環境變量
