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看見回傳資料
  • 透過上述環境變數方式我們就可以把開發環境和產品環境進行區分








你可能感興趣的文章

設計模式 - 工廠方法及抽象工廠

設計模式 - 工廠方法及抽象工廠

用 Python 自學程式設計:程式設計思維入門

用 Python 自學程式設計:程式設計思維入門

practice Recursive Inheritance.c

practice Recursive Inheritance.c






留言討論