Import meta

`import.meta`를 사용하여 코드가 어디에서 실행되고 있는지 이해합니다.

import.meta 객체

ES 모듈을 사용하면 ES 모듈을 가져오거나 컴파일하는 코드로부터 일부 메타데이터를 얻을 수 있습니다. 이는 import.meta를 통해 수행되며, 이 객체는 코드에 이러한 정보를 제공합니다. Nuxt 문서 전반에서 이미 이를 사용하여 코드가 현재 클라이언트 측에서 실행 중인지 서버 측에서 실행 중인지 판별하는 예시들을 볼 수 있습니다.

import.meta에 대해 더 읽어보세요.

런타임(앱) 속성

이 값들은 정적으로 주입되며, 런타임 코드를 트리 셰이킹하는 데 사용할 수 있습니다.

PropertyTypeDescription
import.meta.clientboolean클라이언트 측에서 평가될 때 true입니다.
import.meta.browserboolean클라이언트 측에서 평가될 때 true입니다.
import.meta.serverboolean서버 측에서 평가될 때 true입니다.
import.meta.nitroboolean서버 측에서 평가될 때 true입니다.
import.meta.devbooleanNuxt 개발 서버를 실행 중일 때 true입니다.
import.meta.testboolean테스트 컨텍스트에서 실행 중일 때 true입니다.
import.meta.prerenderboolean빌드의 프리렌더 단계에서 서버에서 HTML을 렌더링할 때 true입니다.

빌더 속성

이 값들은 모듈과 nuxt.config 모두에서 사용할 수 있습니다.

PropertyTypeDescription
import.meta.envobjectprocess.env와 동일합니다.
import.meta.urlstring현재 파일에 대한 해석 가능한 경로입니다.

예시

모듈 내에서 파일을 해석하기 위해 import.meta.url 사용하기

modules/my-module/index.ts
import { createResolver } from 'nuxt/kit'

// 현재 파일을 기준으로 상대 경로를 해석
const resolver = createResolver(import.meta.url)

export default defineNuxtModule({
  meta: { name: 'myModule' },
  setup () {
    addComponent({
      name: 'MyModuleComponent',
      // '/modules/my-module/components/MyModuleComponent.vue'로 해석됩니다
      filePath: resolver.resolve('./components/MyModuleComponent.vue'),
    })
  },
})