nuxt logo

문서 번역(비공식)

Nuxt.js
Version:v3.17

Import meta

import.meta를 사용하여 코드가 실행되는 위치를 이해합니다.

import.meta 객체

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

이것도 참고 developer.mozilla.org > en-US > docs > Web > JavaScript > Reference > Operators > import.meta

런타임 (앱) 속성

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

속성유형설명
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 모두에서 사용할 수 있습니다.

속성유형설명
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')
    })
  }
})

※이 페이지는 Nuxt.js 공식 문서의 비공식 번역 페이지입니다.

공식 문서의 해당 페이지는 여기 있습니다:
https://nuxt.com/docs/3.x/api/advanced/import-meta