VUE 응용 프로그램에서 국제화 (I18N) 및 현지화 (L10N)를 어떻게 구현할 수 있습니까?

VUE 앱의 국제화 및 현지화는 주로 VUE I18N 플러그인을 사용하여 처리됩니다. 1. NPM 또는 원사를 통해 VUE-I18N을 설치하십시오. 2. 번역 메시지를 위해 로케일 JSON 파일 (예 : EN.JSON, ES.JSON)을 만듭니다. 3. 로케일 구성 및 메시지 파일로 main.js에서 i18n 인스턴스를 설정하십시오. 4. $ t ( '키')를 사용하여 템플릿에서 번역에 액세스하십시오. 5. 번역 키를 일관되게 관리하고 확장 성을 위해 깊은 둥지를 피하십시오. 6. 런타임시 로케일 속성을 업데이트하여 언어를 동적으로 전환합니다. 7. 사용자 선호 유지를 위해 로컬 스토리지에서 선택된 언어를 지속하십시오. 8. $ t ( 'hellouser', {name : 'alice'})와 같은 가변 주입으로 번역에서 동적 값을 사용하십시오. 9. I18N 구성에서 다원화 규칙을 구현하고 적절한 복수 처리를 위해 $ tc ()를 사용하십시오. 10. RTL 지원 또는 날짜 서식과 같은 고급 요구의 경우 전체 현지화 범위를 보장하기 위해 Intl 또는 Date-FNS와 같은 라이브러리를 통합하십시오.

VUE 앱의 국제화 (I18N) 및 현지화 (L10N)는 주로 두 가지로 줄어 듭니다. 사용자의 언어 선호도를 기반으로 컨텐츠를 전환하고 텍스트, 날짜, 숫자 및 기타 로케일 특정 요소가 올바르게 표시됩니다. 이를 수행하는 가장 일반적이고 강력한 방법은 VUE 앱을 위해 특별히 구축 된 플러그인 인 Vue i18N을 사용하는 것입니다.

VUE I18N 설정

시작하려면 NPM 또는 원사를 통해 vue-i18n 설치하십시오.

 NPM 설치 vue-i18n@9

설치되면 Locale 메시지 파일 ( en.json , es.json 등)을 작성하고 앱 입력 지점 ( main.js 또는 이와 유사한)에서 i18n 인스턴스를 설정하십시오.

 'vue'에서 {createapp} 가져 오기
'vue-i18n'에서 {createi18n} 가져 오기
'./app.vue'에서 앱 가져 오기
'./locales/en.json'에서 가져 오기
'./locales/es.json'에서 ES 가져 오기

const i18n = createi18n ({{
  레거시 : 거짓,
  로케일 : 'en',
  FollbackLocale : 'en',
  메시지 : {
    ko,
    es
  }
})

CreateApp (app) .use (i18n) .mount ( '#app')

이제 $t('key') 사용하여 템플릿의 어느 곳에서나 번역에 액세스 할 수 있습니다.

번역 파일을 효과적으로 관리합니다

문자열을 구성 요소로 직접 하드 코딩하는 대신 다음과 같은 구조화 된 JSON 파일에 보관하십시오.

en.json

 {
  "환영": "환영합니다!",
  "버튼": {
    "제출": "제출"
  }
}

es.json

 {
  "환영": "¡ Bienvenido!",
  "버튼": {
    "제출": "Enviar"
  }
}

이를 통해 앱이 성장함에 따라 유지 관리가 쉽고 확장됩니다. Poeditor 또는 Crowdin 과 같은 도구를 사용하여 여러 언어 나 팀과 함께 일할 경우 번역을 관리 할 수 ​​있습니다.

몇 가지 팁 :

• 키를 로케일 전체에서 일관되게 유지하십시오.
• 필요한 경우가 아니라면 깊이 중첩 된 구조를 피하십시오. 빨리 지저분해질 수 있습니다.
• 팀에 비 개발자가 포함 된 경우 별도의 파일 또는 도구에 주석을 사용하십시오.

언어를 동적으로 전환합니다

런타임에서 앱의 언어를 변경하는 것은 간단합니다. i18n 인스턴스에서 locale 속성을 업데이트하기 만하면됩니다.

 'vue-i18n'에서 {usei18n} 가져 오기

내보내기 기본값 {
  설정() {
    const {locale} = usei18n ()

    기능 changelang (Newlang) {
      locale.value = Newlang
    }

    반환 {Locale, Changelang}
  }
}

템플릿에서 :

 <button @click = "changelang ( &#39;es&#39;)"> español </button>

이렇게하면 앱의 모든 로컬 텍스트를 즉시 전환합니다. 사용자가 방문 할 때마다 전환 할 필요가 없으므로 로컬 스토리지에서 선택한 언어를 지속 할 수 있습니다.

동적 및 복수화 된 컨텐츠 처리

때로는 변수를 번역 된 문자열에 주입하거나 복수형을 처리해야합니다. Vue i18n은 다음을 모두 지원합니다.

동적 값 사용 :

JSON에서 :

 "Hellouser": "안녕하세요, {name}!"

구성 요소에서 :

 <p> {{$ t ( &#39;hellouser&#39;, {이름 : &#39;alice&#39;})} </p>

복수화 :

i18N 구성에서 복수 규칙 설정 :

 const i18n = createi18n ({{
  레거시 : 거짓,
  로케일 : 'en',
  FollbackLocale : 'en',
  복수형 : {
    ko : (선택, 선택, 길이) => {
      if (choicesLength === 2) {
        반환 선택> 1? 1 : 0
      }
      반환 선택? 1 : 0
    }
  },
  메시지 : {
    ko,
    es
  }
})

그런 다음 JSON에서 :

 "항목 selected": "{count} 항목을 선택했습니다 | {count} 항목을 선택했습니다."

그리고 템플릿에서 :

 <p> {{$ tc ( &#39;itemsSelected&#39;, itemCount, {count : itemCount})} </p>

이를 통해 복수 규칙이 다른 언어로 UI가 자연스럽게 느껴집니다.

그것은 기본적으로 i18N과 L10N이 VUE에서 작동하는 방식입니다. 구조를 확보 한 후에는 너무 복잡하지는 않지만 RTL 언어, 날짜 형식 또는 통화 처리와 같은 일부 가장자리 케이스를 간과하기는 쉽습니다. 이를 위해서는 date-fns 또는 Intl 과 같은 라이브러리와 통합을 살펴보십시오. 그러나 대부분의 표준 요구에 대해 Vue i18n은 그것을 잘 다룹니다.

위 내용은 VUE 응용 프로그램에서 국제화 (I18N) 및 현지화 (L10N)를 어떻게 구현할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!