# Vue CLi學習#6 Vue CLi 環境變數 ###### tags: `Vue cli` ## 環境變數 如果開發一些需要帳號密碼或是需要路徑的時候 (ex: 抓 API 資料)，需要常常輸入的東西且如果有多位開發者，那帳號密碼或相關路徑有可能會不同，寫一個環境變數檔案，將相關的資訊都放在這裡除了可以減少不同使用者修改之外，管理上會變得容易許多 ## 撰寫 `.env` 檔案 參考官網的設置，在根目錄中直接創建 .env 檔， ![](https://i.imgur.com/jTDADLx.png) ![](https://i.imgur.com/U2mehwq.png) ## .env 檔案種類 ### production & development production 指的是正式的開發環境 development 指的是測試環境 指定要在哪種環境下運行可以使用下列檔名 ``` .env.production .env.development ``` ### local 有些像是帳號密碼每個人都不同，像這種有關私人或機密的資訊不想給別人看到，可以使用官方文件所寫的 ``` `.env.local` ``` 這樣他就只能在本地端運行了 ### 如果沒有機密隱私或是開發環境的問題使用 `.env` 就可以惹 ## 變數格式 如果要在 Vue 使用環境變數，變數需要符合下列格式 ``` VUE_APP_自定義名稱 = 變數值 EX: VUE_APP_NAME = DANNY ``` ## 使用環境變數 使用下列語法就可以使用惹 ```=VUE process.env.VUE_APP_NAME ``` ## 注意 <font color='red'>**如果剛套用環境變數，需要終端機需要重新啟動 npm run serve**</font>