資產處理

參照靜態資產

所有 Markdown 檔案都編譯成 Vue 元件，並由 Vite 處理。您可以（而且應該）使用相對 URL 參照任何資產

![An image](./image.png)

您可以在 Markdown 檔案、主題中的 *.vue 元件、樣式和純 .css 檔案中參照靜態資產，方法是使用絕對公用路徑（基於專案根目錄）或相對路徑（基於您的檔案系統）。後者類似於如果您使用過 Vite、Vue CLI 或 webpack 的 file-loader，您所習慣的行為。

常見的圖片、媒體和字型檔案類型會被自動偵測並包含為資產。

連結的檔案不會被視為資產

Markdown 檔案中連結參照的 PDF 或其他文件不會自動視為資產。若要讓連結的檔案可存取，您必須手動將它們放置在專案的 public 目錄中。

所有參照的資產，包括那些使用絕對路徑的資產，都會在生產建置中複製到輸出目錄，並使用雜湊檔名。從未參照的資產不會被複製。小於 4kb 的圖片資產會內嵌 base64 - 這可以透過 vite 設定檔選項來設定。

所有靜態路徑參照，包括絕對路徑，都應該基於您的工作目錄結構。

Public 目錄

有時您可能需要提供未在任何 Markdown 或主題元件中直接參照的靜態資產，或者您可能想要使用原始檔名提供某些檔案。此類檔案的範例包括 robots.txt、網頁圖示和 PWA 圖示。

您可以將這些檔案放置在來源目錄下的 public 目錄中。例如，如果您的專案根目錄是 ./docs 並使用預設來源目錄位置，則您的 public 目錄將會是 ./docs/public。

放置在 public 中的資產會原樣複製到輸出目錄的根目錄。

請注意，您應該使用根絕對路徑來參照放置在 public 中的檔案 - 例如，public/icon.png 應始終在原始碼中參照為 /icon.png。

基本 URL

如果您的網站部署到非根 URL，您將需要在 .vitepress/config.js 中設定 base 選項。例如，如果您計畫將您的網站部署到 https://foo.github.io/bar/，則 base 應設定為 '/bar/'（它應始終以斜線開頭和結尾）。

您的所有靜態資產路徑會自動處理，以調整不同的 base 設定值。例如，如果您在 markdown 中對 public 下的資產有絕對參照

![An image](/image-inside-public.png)

在這種情況下，您不需要在變更 base 設定值時更新它。

但是，如果您正在撰寫會動態連結到資產的主題元件，例如，其 src 基於主題設定值的一張圖片

vue

<img :src="theme.logoPath" />

在這種情況下，建議使用 VitePress 提供的 withBase 輔助函式來包裝路徑

vue

<script setup>
import { withBase, useData } from 'vitepress'

const { theme } = useData()
</script>

<template>
  <img :src="withBase(theme.logoPath)" />
</template>

資產處理 ​

參照靜態資產 ​

Public 目錄 ​

基本 URL ​

資產處理

參照靜態資產

Public 目錄

基本 URL