Vite系列# 環境變數設置

環境變數是做什麼用的？

• 在我們開發的時候，可能會有不同的環境需要做對應
  • 例如下圖，我們會有開發中的環境或是產品部署的環境，兩者的api路徑不同
  • 因為這樣不同，我們不太可能會把api網址寫死在專案中，我們會使用環境變數來做切換，這節就來介紹如何運用環境變數加入到vite的專案中
    

環境變數通常分為三大類

• 通用的環境變數
• 開發中的環境變數
• 完成部署的環境變數

• 以下以通用的環境變數為例：

• 我們現在當前專案的根目錄下新增一個檔案檔名為.env

  • 以下為vite官方的寫法
    
  • 我們會運用about頁面中的api網址作為通中的環境變數做練習
  • 加入在.env後請確保每次調整環境變數，都一定要重啟vite server -> npm run dev
    
  • 打開about頁面，在mounted中如果要在vite中載入環境變數必須照文件說的import.meta.env.VITE_PATH
    
  • 接著將api網址替換成環境變數
    

• 以下以開發中的環境變數為例：

  • 創建.env.development檔名
  • 寫好mounted 寫npm run dev
    

• 以下是完成部署的環境變數

  • 創建.env.production
  • 寫好mounted 寫npm run build
  • 然後將dist資料夾獨立從vscode開啟live-server看見回傳資料
    

• 透過上述環境變數方式我們就可以把開發環境和產品環境進行區分