Vue 3에서 i18n을 구현하는 방법

먼저 라이브러리 설치

vue-i18n@9의 lib를 설치해야 합니다.

npm install vue-i18n@9 --save

src 파일 Vue 앱에서 구성 파일 생성

이름이 i18n.js인 파일과 아래 내용

import { nextTick } from 'vue';
import { createI18n } from 'vue-i18n';

let i18n;

export const SUPPORT_LOCALES = ['pt', 'en', 'es'];

export function setI18nLanguage(locale) {
  loadLocaleMessages(locale);

  if (i18n.mode === 'legacy') {
    i18n.global.locale = locale;
  } else {
    i18n.global.locale.value = locale;
  }

  document.querySelector('html').setAttribute('lang', locale);
  localStorage.setItem('lang', locale);
}

export async function loadLocaleMessages(locale) {
  // load locale messages with dynamic import
  const messages = await import(
    /* webpackChunkName: "locale-[request]" */ `./locales/${locale}.json`
  );

  // set locale and locale message
  i18n.global.setLocaleMessage(locale, messages.default);

  return nextTick();
}

export default function setupI18n() {
  if(!i18n) {
    let locale = localStorage.getItem('lang') || 'pt';

    i18n = createI18n({
      globalInjection: true,
      legacy: false,
      locale: locale,
      fallbackLocale: 'pt'
    });

    setI18nLanguage(locale);
  }
  return i18n;
}

Vue의 main.js에서 이 파일 i18n.js를 가져옵니다.

구성 앱에서 이 가져오기 파일 i18n.js 사용

import i18n from './i18n';

가져오기가 포함된 main.js의 예

.use(i18n())를 사용하여 Vue에서 가져오기를 구현하는 다음 예

import { createApp } from 'vue'

import App from './App.vue'

import i18n from './i18n';

createApp(App)
  .use(i18n())
  .mount('#app')

좋습니다. 이제 번역 파일을 만들고 구성 요소에 사용법을 만들어야 합니다.

번역 로케일 파일 생성

src 폴더에서 이름이 locales인 이 폴더를 생성해야 합니까?

이름 파일: locales/en.json

{
  "languages": {
    "pt": "Portuguese",
    "en": "English",
    "es": "Spanish"
  },
  "title": {
    "config": "Configuration"
  }
}

이름 파일: locales/pt.json

{
  "languages": {
    "pt": "Português",
    "en": "Inglês",
    "es": "Espanhol"
  },
  "title": {
    "config": "Configurações"
  }
}

이름 파일: locales/es.json

{
  "languages": {
    "pt": "Portugués",
    "en": "Inglés",
    "es": "Español"
  },
  "title": {
    "config": "Configurações"
  }
}

영어, 포르투갈어 및 스페인어를 번역하는 아주 좋은 파일

이제 구성 요소에서 번역을 사용합니다.

이제 구성 요소에서 사용 번역이 필요하고 후크 글로벌 useI18n을 사용하여 로케일의 언어를 변경하기 위한 선택 또는 버튼을 만드십시오.

선택 언어 변경이 있는 구성 요소의 기본 사용 예

<script setup>
import { watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { SUPPORT_LOCALES as supportLocales, setI18nLanguage } from '../i18n';

const { locale } = useI18n({ useScope: 'global' });
watch(locale, (val) => {
  setI18nLanguage(val);
});
</script>

<template>
  <h1>{{ $t('title.config') }}</h1>
  <select class="App-language" v-model="locale">
    <option
      v-for="optionLocale in supportLocales"
      :key="`locale-${optionLocale}`"
      :value="optionLocale">{{ optionLocale }}
    </option>
  </select>
</template>

당신은 좋은 해커이고 당신의 Vue 3는 전 세계의 많은 사람들을 위해 많은 언어와 국제적 접근이 가능한 내부화를 가지고 있습니다. 당신을 위한 좋은 연구와 멋진 #hacktoberfest

참조

참조가 필요한 경우 더 많은 예제와 함께 아래 목록을 따르십시오.

공식 사이트 vue-i18n

실제 구현으로 작업하는 프로젝트Google Vue

Github의 내 프로필@lucasferreiralimax

도움이 필요하세요?

나에게 댓글을 달거나 이야기하십시오.
도움이 되고 싶고 만나서 반가워요.