建立 2026-09-15 更新 2026-09-15

VitePress 是什麼

VitePress 是一個靜態網站產生器（Static Site Generator, SSG）：你用 Markdown 寫內容，它套上主題，建置後產出一堆 HTML／CSS／JS，可以放到 GitHub Pages、Netlify、Vercel，或自己的 Nginx。

它由 Vite 驅動開發伺服器與打包，頁面本身是 Vue 3 元件。因此本機改一個字幾乎立刻出現在瀏覽器，而且文件頁裡可以直接放 Vue 元件做互動示範。

它實際在做什麼

1. 讀取 docs/（或你指定的目錄）裡的 .md 檔。
2. 把 Markdown 編成 HTML，每一頁再當成一個 Vue 單檔元件（Single-File Component, SFC）。
3. 套用預設文件主題（或你自己的主題）。
4. build 時預先渲染成靜態 HTML（對 SEO 與第一次開啟速度有利）。
5. 瀏覽器載入後「活化」（hydrate）成單頁應用（SPA），之後在站內點連結不會整頁重載。

第一次進來是靜態 HTML，之後在站內切頁是 SPA。這是 VitePress 文件站「開得快、點下去也順」的原因。

適合做什麼

官方文件列出的主要場景：

• 技術文件：預設主題就是為文件站設計的。Vite、Rollup、Pinia、VueUse、Vitest 等專案文件都用它。
• Vue 官方文件：也是 VitePress，但為了多語系切換而自訂了主題。
• 部落格、介紹頁、小型內容站：主題可完全自訂，也能在建置時載入資料、動態產生路由。

不適合硬拿來做需要登入後才看得到資料、或內容會隨每個使用者即時改變的後台系統。那種需求該用一般 Vue／Nuxt 應用，而不是 SSG。

官方怎麼說

完整定義見官方〈VitePress 是什麼？〉。作者 Evan You 在 VueConf Toronto 2020 用一場演講講 Vite 要解決的問題，以及 VitePress 如何承接 VuePress 的文件站定位：

這場約一小時，前半講 Vite 為什麼比當時的 webpack 開發體驗更快，後半才進入 VitePress。API 已演進到 1.x，把影片當「為什麼會有這個工具」來看即可；語法請以本站與官方文件為準。