[Nuxt3] nuxt.config.ts 설정

import { fileURLToPath } from 'url';

export default defineNuxtConfig({
  alias: {
    '@': fileURLToPath(new URL('./src/', import.meta.url)),
    '~': fileURLToPath(new URL('./', import.meta.url)),
  },
  components: {
    dirs: [
      {
        path: '@/components',
        extensions: ['vue'],
        global: true,
      },
    ],
  },
  css: ['@/assets/main.scss'],
  buildDir: 'dist',
  srcDir: 'src/',
  ssr: true,
  sourcemap: {
    server: true,
    client: false,
  },
});

• alias : JS 또는 CSS 내에서 사용자 지정 디렉토리에 별칭을 정의하여 사용

  • e.g. ./src/public/assets/main.scss가 있다고 가정하면 @/assets/main.scss로 사용 가능

• components : nuxt 컴포넌트를 자동으로 등록, components 속성에 정의한 디렉토리의 모든 컴포넌트는 import하지 않아도 모든 페이지에서 사용 가능

  • 컴포넌트 속성 관련하여 Nuxt Directory Structure 참고

• css : 전역으로 설정하려는 CSS를 정의

• buildDir : 빌드한 Nuxt 파일을 저장할 디렉토리 정의

• srcDir : Nuxt의 소스 디렉토리 정의

• ssr : 서버에서의 HTML 렌더링 활성화 여부

• sourcemap : JS에 대한 소스맵 생성 여부

  ---

• 참고 : Nuxt3 Configuration Reference