アセットの扱い

静的アセットの参照

すべてのMarkdownファイルはVueコンポーネントにコンパイルされ、Viteによって処理されます。相対URLを使用してアセットを参照する事が**推奨されます**。

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

Markdownファイル、テーマ内の*.vueコンポーネント、スタイル、およびプレーンな.cssファイルでは、絶対パブリックパス（プロジェクトルートに基づく）または相対パス（ファイルシステムに基づく）を使用して静的アセットを参照できます。後者は、Vite、Vue CLI、またはwebpackのfile-loaderを使用したことがある場合に慣れている動作に似ています。

一般的な画像、メディア、およびフォントのファイルタイプは自動的に検出され、アセットとして含まれます。

リンクされたファイルはアセットとして扱われない

Markdownファイル内のリンクで参照されるPDFやその他のドキュメントは、自動的にアセットとして扱われません。リンクされたファイルにアクセスできるようにするには、プロジェクトのpublicディレクトリ内に手動で配置する必要があります。

絶対パスを使用するものを含め、参照されたすべてのアセットは、プロダクションビルドでハッシュ化されたファイル名で出力ディレクトリにコピーされます。参照されていないアセットはコピーされません。4kb未満の画像アセットはbase64インライン化されます。これはvite設定オプションで構成できます。

絶対パスを含むすべての**静的**パス参照は、作業ディレクトリの構造に基づいている必要があります。

パブリックディレクトリ

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>

アセットの扱い ​

静的アセットの参照 ​

パブリックディレクトリ ​

ベースURL ​

アセットの扱い

静的アセットの参照

パブリックディレクトリ

ベースURL