Skip to content

アセットハンドリング

すべてのMarkdownファイルは、Vueコンポーネントにコンパイルされ、Viteで処理されます。相対URLでアセットを参照することができますし、そうすべきです。

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

マークダウンファイルの静的アセット、テーマの*.vueコンポーネント、スタイルやプレーンな.cssファイルは、絶対パス(プロジェクトルートを基準とする)または相対パス(ファイルシステムを基準とする)を使用して参照できます。後者は、vue-cliやwebpackのfile-loaderを使用したことがある場合に慣れている動作と似ています。

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

参照されるすべてのアセット(絶対パスを使用するものを含む)は、本番ビルドでハッシュ化されたファイル名を持つdistフォルダにコピーされます。参照されないアセットは、コピーされません。vue-cliと同様に、4kb未満の画像アセットがbase64インライン化されます。

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

公開ファイル

Markdownやテーマコンポーネントのいずれでも直接参照されない静的資産を提供する必要がある場合があります(例えば、ファビコンやPWAアイコンなど)。プロジェクトルート下のpublicディレクトリ(vitepress build docsを実行している場合はdocsフォルダ)は、ソースコードで参照されない(例:robots.txt)、または全く同じファイル名(ハッシュなし)を保持しなければならない静的資産を提供するための脱出口として使用することができます。

publicに置かれたアセットは、そのままdistディレクトリのルートにコピーされます。

publicに配置されたファイルは、ルートの絶対パスで参照することに注意してください。たとえば、public/icon.pngは、ソースコードでは常に/icon.pngとして参照されるべきです。

ベースURL

あなたのサイトを非ルートURLにデプロイする場合、.vitepress/config.js で base オプションを設定する必要があります。たとえば、あなたのサイトを https://foo.github.io/bar/ にデプロイする予定であれば、base は '/bar/' に設定する必要があります(常にスラッシュで始まり、スラッシュで終わります)。

すべての静的アセットのパスは、異なるベース設定値に対応するように自動的に処理されます。例えば、マークダウンでpublicの下にあるアセットへの絶対的な参照がある場合、そのアセットへのパスが自動的に処理されます。

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

この場合、ベースコンフィグ値を変更した際に更新する必要はありません。

しかし、アセットに動的にリンクするテーマコンポーネントをオーサリングする場合、例えば 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>