Vite 是什麼
Vite 是一種前端建置工具，可快速提供開發環境。
Vite 由 Vue.js 的核心團隊開發，但也支援 React 等前端框架。
以下是 Vite 的特色及優缺點：
Vite 的優點
快速的冷啟動
Vite 使用 ES Module 的原生瀏覽器解析功能，並利用 HTTP/2 的特性，使啟動時間極為短暫。
這意味著在開發模式下，可以感受到即時的重新載入與快速的編譯速度。優異的開發體驗
Vite 支援熱模組替換（HMR）與快速編譯重建，
因此開發過程中能即時檢視修改的結果，進而提升開發效率。
此外，Vite 也支援 TypeScript、CSS 預處理器等。動態引入
Vite 支援動態引入，只會在需要時才從伺服器下載相關程式碼，
可節省初始頁面載入的時間與頻寬。簡化的配置
Vite 的配置非常簡單，只需一個vite.config.js檔案，
而且多數情況下開發者甚至不需要修改預設配置。
Vite 的缺點
生態系統尚不成熟
相較於 Webpack、Parcel 等前端建置工具，Vite 是相對年輕的項目，
因此在某些方面的生態系統可能不如其他工具成熟。專案規模限制
Vite 在中小型專案中表現出色，但在大型專案中可能面臨一些挑戰。
特別是當專案具有複雜的建置需求、大量的程式碼或較長的建置時間時，
可能需要額外的配置與調整。
Vite 使用筆記
環境變數
在 Vite 專案使用環境變數非常簡單，不需額外安裝套件，也不需做特別的設定，
而且還能為不同的環境設定不同的變數。使用步驟如下：
- 專案根目錄建立環境變數檔案
$ touch .env.development
$ touch .env.production
$ touch .env.mymode
- 在 .env 檔當中編寫環境變數
注意：變數名稱一律加上前綴：VITE_
.env.development 範例
VITE_BASE_URL=http://localhost:8080/
.env.development 的變數用於開發環境。
.env.production 的變數用於產品環境。
另外也可自訂模式，例如 .env.newmode 等。
但要記得在 package.json 編寫腳本以利使用。
"scripts": {
"build:newmode": "vite build --mode newmode"
}
- 代碼中使用環境變數
在代碼中使用環境變數時，需在變數前面加上 import.meta.env.
範例如下：
const getRequest = async () => {
const result = await axios.get(import.meta.env.VITE_BASE_URL);
return result.data;
};