Nuxt는 스타일시트, 폰트 또는 이미지를 처리하기 위해 두 개의 디렉토리를 사용합니다.

• public/ 디렉토리의 내용은 서버 루트에서 그대로 제공됩니다.
• assets/ 디렉토리는 빌드 도구(Vite 또는 webpack)가 처리하도록 하고 싶은 모든 자산을 관례적으로 포함합니다.

Public Directory

public/ 디렉토리는 애플리케이션의 정의된 URL에서 공개적으로 사용할 수 있는 정적 자산을 위한 공개 서버로 사용됩니다.

애플리케이션의 코드나 브라우저에서 루트 URL /을 통해 public/ 디렉토리의 파일을 가져올 수 있습니다.

Example

예를 들어, public/img/ 디렉토리에 있는 이미지 파일을 정적 URL /img/nuxt.png에서 참조하는 경우:

<template>
  <img src="/img/nuxt.png" alt="Discover Nuxt" />
</template>

Assets Directory

Nuxt는 Vite (기본값) 또는 webpack을 사용하여 애플리케이션을 빌드하고 번들링합니다. 이러한 빌드 도구의 주요 기능은 JavaScript 파일을 처리하는 것이지만, 플러그인 (Vite의 경우) 또는 로더 (webpack의 경우)를 통해 스타일시트, 폰트 또는 SVG와 같은 다른 종류의 자산을 처리하도록 확장할 수 있습니다. 이 단계는 주로 성능이나 캐싱 목적(예: 스타일시트 최소화 또는 브라우저 캐시 무효화)을 위해 원본 파일을 변환합니다.

관례적으로, Nuxt는 이러한 파일을 저장하기 위해 assets/ 디렉토리를 사용하지만, 이 디렉토리에 대한 자동 스캔 기능은 없으며 다른 이름을 사용할 수도 있습니다.

애플리케이션의 코드에서 assets/ 디렉토리에 있는 파일을 ~/assets/ 경로를 사용하여 참조할 수 있습니다.

Example

예를 들어, 빌드 도구가 이 파일 확장자를 처리하도록 구성된 경우 처리될 이미지 파일을 참조하는 경우:

<template>
  <img src="~/assets/img/nuxt.png" alt="Discover Nuxt" />
</template>