為了不把重要的 Google API key 上傳，我們要用到環境變數！

什麼是環境變數？

環境變數 (environment variables) 是指儲存程式在運行時所需的變數，可以用於存儲敏感資料，如密碼、API憑證和其他不應直接寫入程式也不可被上傳的資訊，或是可拿來管理不同開發模式或環境所需的配置狀態，例如開發、生產與測試環境，每個環境可能有不同的資料庫連接設定或 API 密鑰。

因為這次程式碼中有使用到 Google API Key ，所以避免 API key 外流我們要使用到環境變數，.env 檔案

如何使用？

在建置 Ionic 專案時，就有自動安裝了 Vite ，目前的 Vite 與 Vue CLI 本身就能處理 .env 檔，所以不用另外安裝 ENV 檔案的管理工具(例如dotenv)。

• 首先在根目錄創建一個 .env 檔案，並將 API Key 寫入，不需雙引號，也要注意有沒有空白，為了防止環境變數洩露給客戶端，在.env檔案中，只有前綴詞用 VITE_ 的變數才會讓 Vite 讀取。

  VITE_GOOGLE_API_KEY=//這邊填上你的 API Key
  

• 用import.meta.env.來使用變數，在 Google map API 的 apiKey 中填入 import.meta.env.VITE_GOOGLE_API_KEY

  const newMap = await GoogleMap.create({
    id: "my-map",
    element: mapRef,
    apiKey: import.meta.env.VITE_GOOGLE_API_KEY,
    config: {
      center: {
        lat: 25.013514,
        lng: 121.214805,
      },
      zoom: 16,
      disableDefaultUI: true,
    },
  });
  
  

• 最重要是記得到 .gitignore 檔案中填上 .env，防止 .env 檔案被上傳～

這樣就設定好摟～安全安全！