Vue CLI 3 環境變數設置

Vue CLI 3 環境變數設置

使用 Vue 開發時若有使用到 firebse 資料庫,會需要將資料庫金鑰加入到專案中,但在 commit 時不建議將金鑰也一併 commit 到公開的儲存庫上,這時就會建議使用環境變數

新增一個 .env.local

新增的 .env.local 會在所有環境中被載入,但會被 git 忽略
在 .env.local 中加入環境變數,例如:

1
2
3
4
5
6
FIREBASE_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 為例:

  1. 進入 heroku 專案畫面,點選 Settings,在 Settings 頁面有設定環境變數的地方 - Config Vars
  2. 點選 Reveal Config Vars
  3. 將變數加上,如下圖:

官網的環境變數說明:
https://cli.vuejs.org/zh/guide/mode-and-env.html

評論

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×