# Vue API 環境變數（IP）設定

## 為什麼要用環境變數？

在開發專案時，我們通常需要在「本地電腦測試」和「雲端伺服器」兩個環境之間切換。
但如果每次都手動修改程式裡的 API 位址（例如 IP），不僅麻煩，還很容易搞錯。
所以，我們可以用 **環境變數**，讓程式在不同環境下自動選擇正確的設定值。這樣就不需要每次切換環境時去改程式碼了！

---

## Laravel 和 Vue 的設定方式有什麼不同？

1. **Laravel 的部分**
- 只需要在 `.env` 檔案中設定好伺服器的 IP 和 CORS（跨域）相關的內容。
- 設定完成後，就不用再動它了！Laravel 基本上可以「一次設定，永遠使用」。

2. **Vue 的部分**
- Vue 每次切換環境時，API 的位址（Base URL）需要改成對應的 IP，例如：
- 本地開發：`http://127.0.0.1:8000/api`
- 雲端伺服器：`http://你的雲端IP/api`
- 不過，透過 Vue 的 `.env` 檔案，可以讓這個過程自動化！

---

## 怎麼用 `.env` 檔案設定 Vue 的 API 位址？

### 1. `.env` 檔案放哪裡？

把 `.env` 檔案放在專案的根目錄（就是和 `package.json` 同層級的地方）。
你的資料夾結構大概會長這樣：

my-vue-project/
├── node_modules/
├── public/
├── src/
├── .env                 # 通用設定檔
├── .env.development     # 本地開發用
├── .env.production      # 上線用
├── package.json
└── vue.config.js        # 可選，進一步的設定檔

---

### 2. 檔案要怎麼寫？

#### `.env.development`（本地開發用）

VUE_APP_API_BASE=http://127.0.0.1:8000/api

#### `.env.production`（上線用）

VUE_APP_API_BASE=http://你的雲端IP/api

> **小提醒**：在 Vue 中，環境變數的名稱一定要用 `VUE_APP_` 開頭，否則 Vue 不會認得！

---

### 3. Vue 裡怎麼用這些變數？

打開你的 `src/api/api.js`，改成這樣：

import axios from 'axios';

const instance = axios.create({
    baseURL: process.env.VUE_APP_API_BASE, // 讀取環境變數
});

export default instance;

---

## 那這樣我還需要手動改東西嗎？

不需要了！
因為 Vue 會自動根據你執行的指令，選擇對應的 `.env` 檔案：
- 如果是本地測試：執行 `npm run serve`，會讀 `.env.development`。
- 如果是打包上線：執行 `npm run build`，會讀 `.env.production`。

---

## 注意事項

1. **不要把敏感資訊放進 `.env`！**
`.env` 只是用來管理像 API 位址這種公開的設定，不適合放密碼或金鑰，因為最終會被寫進程式碼裡。

2. **修改 `.env` 後記得重啟！**
改了 `.env` 的內容後，要重新執行 `npm run serve` 或 `npm run build` 才會生效。

3. **伺服器不需要 `.env` 檔案！**
`.env` 只在你本地開發或打包時使用，上傳到雲端的 `dist/` 檔案不會包含 `.env`。

---

## 總結

用 `.env` 來管理 API 的位址後，切換環境就不用再手動改程式碼了！
只需要：
1. 在 `.env` 裡設定好本地和雲端的 API 位址。
2. Vue 自動選擇對應的設定，讓你開發和部署都更方便。