使用 Vue 開發時若有使用到 firebse 資料庫，會需要將資料庫金鑰加入到專案中，但在 commit 時不建議將金鑰也一併 commit 到公開的儲存庫上，這時就會建議使用環境變數
新增一個 .env.local
新增的 .env.local 會在所有環境中被載入，但會被 git 忽略
在 .env.local 中加入環境變數，例如：1
2
3
4
5
6FIREBASE_APIKEY=Key
FIREBASE_AUTODOMAIN=Domain
FIREBASE_DATABASEURL=DatabaseUrl
FIREBASE_PROJECTID=ProjectId
FIREBASE_STORAGEBUCKET=StorageBucket
FIREBASE_MESSAGINGSENDERID=MessagingsId
左邊為環境變數的變數名稱，通常以全部都大寫字母來命名
右邊是金鑰的內容，在 firebase 中可以取得相關的資料
在 JS 中取得環境變數設置
在 JS 中要使用環境變數，只要在變數前加上 process.env 就可以了～
例如：1
process.env.FIREBASE_APIKEY
部署要注意的地方
將金鑰改為環境變數之後，因為只有在本地端才能使用，所以要注意部署網站時要將環境變數設定到機器上
以部署到 heroku 為例：
- 進入 heroku 專案畫面，點選 Settings，在 Settings 頁面有設定環境變數的地方 - Config Vars
- 點選 Reveal Config Vars
- 將變數加上，如下圖：