자산 처리 (Asset Handling)
정적 자산 참조 (Referencing Static Assets)
모든 마크다운 파일은 Vue 컴포넌트로 컴파일되며 Vite에 의해 처리됩니다. 상대 URL을 사용하여 자산을 참조해야 합니다.
마크다운 파일, 테마 내의 *.vue 컴포넌트, 스타일 및 일반 .css 파일에서 정적 자산을 절대 공개 경로(프로젝트 루트를 기반으로 함) 또는 상대 경로(파일 시스템을 기반으로 함)를 사용하여 참조할 수 있습니다. 후자는 Vite, Vue CLI, 또는 webpack의 file-loader를 사용해본 경험이 있는 경우에 익숙한 동작 방식입니다.
일반적인 이미지, 미디어 및 폰트 파일 유형은 자동으로 자산으로 감지되어 포함됩니다.
마크다운 파일 내의 링크로 참조된 파일(PDF 또는 기타 문서 등)은 자동으로 자산으로 처리되지 않습니다. 링크된 파일을 접근 가능하게 하려면, 수동으로 프로젝트의 public 디렉토리에 배치해야 합니다.
모든 참조된 자산은 절대 경로를 포함하여 프로덕션 빌드에서 해시된 파일 이름으로 출력 디렉토리에 복사됩니다. 참조되지 않은 자산은 복사되지 않습니다. 4kb보다 작은 이미지 자산은 base64 인라인으로 변환됩니다 - 이는 vite 구성 옵션을 통해 설정할 수 있습니다.
Public 디렉토리 (The Public Directory)
Markdown 또는 테마 컴포넌트에서 직접 참조되지 않는 정적 자산을 제공하거나, 원본 파일 이름으로 특정 파일을 제공해야 할 경우가 있습니다(예: robots.txt, 파비콘, PWA 아이콘 등).
이러한 파일은 소스 디렉토리 아래 public 디렉토리에 배치할 수 있습니다. 예를 들어, 프로젝트 루트가 ./docs이고 기본 소스 디렉토리 위치를 사용하는 경우, public 디렉토리는 ./docs/public이 됩니다.
public에 배치된 자산은 그대로 출력 디렉토리의 루트로 복사됩니다.
public에 배치된 파일을 참조할 때는 루트 절대 경로를 사용해야 합니다 - 예를 들어, public/icon.png은 소스 코드에서 항상 /icon.png로 참조해야 합니다.
Base URL
사이트가 비루트 URL에 배포되는 경우, .vitepress/config.js에서 base 옵션을 설정해야 합니다. 예를 들어, 사이트를 https://foo.github.io/bar/에 배포할 계획이라면, base는 /bar/로 설정해야 합니다(항상 슬래시로 시작하고 끝나야 함).
모든 정적 자산 경로는 다양한 base 구성 값에 맞게 자동으로 처리됩니다.