VitePress 是什麼？
VitePress 是一個 靜態網站產生器 (SSG)，用於建置快速、以內容為中心的網站。簡單來說，VitePress 會將你用 Markdown 編寫的原始內容套用主題，並產生靜態 HTML 頁面，這些頁面可以輕鬆部署到任何地方。
只想試用看看？跳到 快速入門。
使用案例
文件
VitePress 內建一個預設主題，專為技術文件設計。它提供你現在正在閱讀的這個頁面，以及 Vite、Rollup、Pinia、VueUse、Vitest、D3、UnoCSS、Iconify 和 更多 的文件。
Vue.js 官方文件 也基於 VitePress，但使用多種翻譯共用的自訂主題。
部落格、作品集和行銷網站
VitePress 支援 完全自訂的主題，並提供標準 Vite + Vue 應用程式的開發人員體驗。由於建構在 Vite 上，也表示你可以直接從其豐富的生態系統中使用 Vite 外掛程式。此外，VitePress 提供彈性的 API 來 載入資料（本機或遠端）和 動態產生路由。只要資料可以在建置時確定，你就可以使用它來建置幾乎任何東西。
Vue.js 官方部落格 是個簡單的部落格，其索引頁面是根據本機內容產生的。
開發人員體驗
VitePress 旨在在使用 Markdown 內容時提供絕佳的開發人員體驗 (DX)。
Vite 支援：即時啟動伺服器，編輯內容會立即反映（<100ms），無需重新載入頁面。
內建 Markdown 擴充功能：Frontmatter、表格、語法高亮顯示...應有盡有。具體來說，VitePress 提供許多進階功能，可用於處理程式碼區塊，非常適合撰寫高度技術性的文件。
Vue 增強 Markdown：每個 Markdown 頁面也是 Vue 單一檔案元件，這要歸功於 Vue 範本與 HTML 100% 的語法相容性。您可以使用 Vue 範本功能或匯入的 Vue 元件，將互動性嵌入您的靜態內容中。
效能
與許多傳統的 SSG 不同，在傳統的 SSG 中，每次導覽都會導致整個頁面重新載入，由 VitePress 生成的網站會在第一次瀏覽時提供靜態 HTML，但在網站中後續的導覽會變成 單頁應用程式 (SPA)。我們認為，這種模式為效能提供了最佳平衡
快速的初始載入
任何頁面的第一次瀏覽都會提供靜態、預先渲染的 HTML，以實現快速的載入速度和最佳的 SEO。然後，頁面會載入一個 JavaScript 程式包，將頁面轉換為 Vue SPA（「水化」）。與 SPA 水化速度慢的普遍假設相反，這個過程實際上非常快，這要歸功於 Vue 3 的原始效能和編譯器最佳化。在 PageSpeed Insights 上，典型的 VitePress 網站即使在網路速度較慢的低階行動裝置上，也能達到接近完美的效能分數。
快速的載入後導覽
更重要的是，SPA 模式可以在初始載入之後帶來更好的使用者體驗。網站中的後續導覽不再會導致整個頁面重新載入。相反地，會擷取並動態更新進入頁面的內容。VitePress 還會自動預先擷取視窗中連結的頁面區塊。在多數情況下，載入後導覽會感覺是即時的。
互動性無損耗
為了能夠為嵌入在靜態 Markdown 中的動態 Vue 部分進行水化，每個 Markdown 頁面都會被處理成一個 Vue 元件，並編譯成 JavaScript。這聽起來可能效率不高，但 Vue 編譯器足夠聰明，可以將靜態部分和動態部分分開，最大程度地減少水化成本和載荷大小。對於初始頁面載入，靜態部分會自動從 JavaScript 載荷中移除，並在水化期間跳過。
VuePress 呢？
VitePress 是 VuePress 的精神繼承者。最初的 VuePress 是基於 Vue 2 和 webpack。有了 Vue 3 和 Vite 的支持，VitePress 提供了顯著更好的 DX、更好的生產效能、更精緻的預設佈景主題，以及更靈活的自訂 API。
VitePress 和 VuePress 之間的 API 差異主要在於佈景主題和自訂。如果你使用的是帶有預設佈景主題的 VuePress 1，則遷移到 VitePress 應該相對簡單。
VuePress 2 也投入了精力，它也支援 Vue 3 和 Vite，並且與 VuePress 1 具有更好的相容性。然而，並行維護兩個 SSG 是不可持續的，因此 Vue 團隊決定專注於 VitePress 作為長期推薦的 SSG。