Lingo.dev + Vue.js 단일 파일 컴포넌트

Lingo.dev CLI는 Vue I18n 단일 파일 컴포넌트를 지원하여 .vue 파일 내에 번역을 유지할 수 있습니다.

참고: Vue.js 애플리케이션에서 JSON 로케일 파일을 사용하는 경우, 프론트엔드용 .json 형식을 사용하세요.

빠른 설정

프로젝트 루트에 i18n.json 구성 파일을 생성하세요:

{
  "version": 1,
  "locale": {
    "source": "en",
    "targets": ["es", "fr", "de"]
  },
  "buckets": {
    "vue-json": {
      "include": ["src/**/*.vue"]
    }
  }
}

이 구성은 영어를 소스 언어로 설정하고, 스페인어, 프랑스어, 독일어를 대상 언어로 지정하며, src 디렉토리의 모든 .vue 파일을 처리합니다.

지원되는 언어 찾기

사용 가능한 소스 및 대상 언어 목록 확인:

npx lingo.dev@latest show locale sources
npx lingo.dev@latest show locale targets

모든 항목 번역하기

다음 명령을 실행하여 모든 Vue 컴포넌트를 번역하세요:

npx lingo.dev@latest i18n

CLI는 컴포넌트의 <i18n> 블록을 스캔하고, 새로운 또는 변경된 콘텐츠를 번역한 후 번역을 제자리에 업데이트합니다.

Vue 컴포넌트와의 작동 방식

Lingo.dev는 Vue의 표준 i18n 구조와 직접 작동합니다:

<template>
  <div>
    <h1>{{ $t("welcome") }}</h1>
    <p>{{ $t("description") }}</p>
  </div>
</template>

<i18n>
{
  "en": {
    "welcome": "Welcome",
    "description": "This is a Vue component"
  }
}
</i18n>

번역 후, 컴포넌트에는 모든 대상 언어가 포함됩니다:

<i18n>
{
  "en": {
    "welcome": "Welcome",
    "description": "This is a Vue component"
  },
  "es": {
    "welcome": "Bienvenido",
    "description": "Este es un componente Vue"
  },
  "fr": {
    "welcome": "Bienvenue",
    "description": "Ceci est un composant Vue"
  }
}
</i18n>

고급 구성

파일 제외하기

특정 컴포넌트를 번역에서 제외:

"vue-json": {
  "include": ["src/**/*.vue"],
  "exclude": ["src/components/NoTranslate.vue"]
}

하이브리드 번역

컴포넌트 기반 및 파일 기반 번역을 결합:

"buckets": {
  "vue-json": {
    "include": ["src/**/*.vue"]
  },
  "json": {
    "include": ["src/locales/[locale].json"]
  }
}

이 설정은 컴포넌트별 번역을 컴포넌트 내에 유지하고 전역 번역을 별도의 JSON 파일에 저장합니다.

이 접근 방식을 사용하는 이유

  • 번역을 사용하는 컴포넌트와 함께 유지
  • 별도 파일로 문자열을 추출할 필요 없음
  • AI가 더 나은 번역을 위해 컴포넌트 컨텍스트를 이해
  • 변경된 부분만 번역
  • Vue I18n의 권장 패턴과 호환

Lingo.dev는 Vue의 컴포넌트 기반 아키텍처를 유지하면서 AI 기반 번역을 제공합니다.