Vite 是一個快速、輕量級的構建工具，旨在提供極致的開發體驗。本文將展示如何在使用 React 和 Vite 的項目中進行本地編譯、測試以及預覽。

1. 初始化項目

假設你已經成功使用 Vite 和 React 初始化了一個項目，並完成了開發，現在你希望能夠將項目進行本地構建並進行測試。

2. 本地構建項目

在項目根目錄中，通過以下命令構建項目：

npm run build

這將觸發 Vite 的構建流程，最終在項目的根目錄生成一個 dist 文件夾。這個文件夾包含了編譯後的靜態文件，類似於傳統的前端構建工具（如 Webpack）的打包輸出。構建完成後的目錄結構通常如下所示：

dist/
  ├── index.html
  ├── assets/
  │   ├── index-[hash].js
  │   ├── index-[hash].css
  │   └── ...（其他資源文件）

目錄結構解析

•    index.html: 這個文件是應用的入口點，也是你可以通過瀏覽器訪問的頁面。
•    assets/: 存放項目中的靜態資源，包括 JavaScript、CSS 和其他資源文件。通過使用哈希值（index-[hash].js 和 index-[hash].css），Vite 可以確保每次構建時文件具有唯一性，以便更好地利用瀏覽器緩存。

3. 本地預覽

構建完成後，你可以通過以下命令在本地預覽項目：

npm run preview

該命令啓動一個本地服務器，用於展示 dist 文件夾中的內容，這對於檢查構建結果是否正確非常有用。默認情況下，Vite 會在 http://localhost:4173 端口上提供服務，打開瀏覽器並訪問這個地址，就可以預覽打包後的應用。

4. 使用 Serve 包本地預覽

如果你更習慣使用其他服務器工具，也可以通過安裝 serve 包來本地預覽項目。serve 是一個輕量級的靜態服務器，用來提供打包後的內容。

首先，確保全局或項目中安裝了 serve：

npm install -g serve

接着，可以通過以下命令啓動本地服務器：

npx serve dist

運行此命令後，serve 會在本地啓動一個 HTTP 服務器，你可以訪問本地地址來查看項目的構建結果。