---
# System prepended metadata

title: Vue CLi學習#6 Vue CLi 環境變數
tags: [Vue cli]

---

# 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>