Vue3 和 Vite 設定環境變數

設定環境變數

在 Vue3 和 Vite 的專案中，環境變數允許你根據不同的開發、測試或生產環境，配置不同的變數。這在處理 API 連接、應用行為等方面非常有用。

創建 .env 檔案

首先，你需要在專案的根目錄下建立一個 .env 檔案。這個檔案可以包括你應用中需要的任何環境變數。要注意的是，所有要在客戶端可用的變數必須以 VITE_ 開頭。例如：

# .env
VITE_API_URL=https://api.example.com

為不同環境定義變數

你可以為不同的環境（如開發、測試、生產）創建不同的 .env 檔案。只需在 .env 之前加上環境名稱，如 .env.production、.env.development 等。Vite 會根據當前的環境自動選擇合適的檔案。

在 Vue3 中使用環境變數

一旦你定義了環境變數，就可以在 Vue3 的任何部分使用它們。透過 import.meta.env，你可以輕鬆訪問這些變數。以下是一個在組件中使用環境變數的例子：

// src/components/MyComponent.vue
<template>
  <div>{{ apiUrl }}</div>
</template>

<script>
export default {
  data() {
    return {
      apiUrl: import.meta.env.VITE_API_URL, // 使用設定的環境變數
    };
  },
};
</script>

這樣，你就可以在整個專案中靈活使用環境變數，使應用更容易配置和維護。

在命令行中直接傳遞變數

如果你沒有 .env 檔案，你也可以在命令行中直接設置變數。只需在運行 Vite 命令之前，設置變數並以 VITE_ 開頭。例如：

VITE_API_URL=https://api.example.com npm run dev

這樣設置的變數將在整個開發會話中可用。