studyLog/vue3

vue3에서 vue-i18n 다국어 처리 적용하는 법

willy4202 2022. 9. 17. 16:00

지난번엔 i18n이 어떤 것인지에 대해서 알아보았습니다.

그렇다면 본격적으로 vue3 프로젝트 내부에서 i18n을 어떻게 적용할 수 있는지에 대해 알아봅시다.

 

설치

우선 vue3-i18n 을 다운받아야 하는데,
Vue3 프로젝트를 만들었다는 가정하에 진행합니다.
터미널에 npm install vue-i18n@9을 입력해야 vue3 부터 사용이 가능합니다.

main.js 설정

프로젝트 src/main.js 파일에서 다음과 같이 createI18n을 app의 plugin으로 등록해줍니다.

여기서 createI18n에 들어가는 내용은 언어별 리소스파일을 예제로 들겠습니다.

제가 임시로 만들어둔 messages 파일을 들고와서 import 해두겠습니다.

 

use는 사용하고자하는 플러그인을 createApp에 넣어주어야 해당 프로젝트에서 사용 가능합니다. 

app.use() 따라서 별도의 임포트 없이 app.vue와 같은 페이지에서도 활용할 수 있습니다.

 

지금 아래 코드를 이해하지 못해도 괜찮습니다.

이후 다시 짚으며 가겠습니다.

우선은 언어를 들고와서 createI18n에 넣고 app에 전달해주는구나 정도로 이해하면 됩니다.

import { createApp } from 'vue'
import { createI18n } from 'vue-i18n'

const i18n = createI18n({
  // something vue-i18n options here ...
})

const app = createApp({
  // something vue options here ...
})

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

나중에 유지보수 관리를 위해서 저는 따로 코드를 분리해서 관리했습니다.
우선 어떤 방식으로 동작하는지 한눈에 보기 위해 공식문서에 따라 위와 같이 작성했습니다.

locales 폴더

앞서 폴더구조를 간략하게 살펴봤는데, locales라는 폴더에선 언어별 리소스 관리를 담당합니다.

각 나라의 언어별 json 파일을 넣어두고, index.js에서 필요한 파일을 꺼내서 createi18n에 전달해주는 방식입니다.

그러기 위해서 index.js에 messages의 json 파일들을 하나씩 import 해주겠습니다.

아래는 locales/index.js 예시입니다.

언어 설정 속성으로는 locale과 fallbackLocale이 있습니다.

import { createI18n } from "vue-i18n";

import en from "@/locales/messages/en-US.json";
import ar from "@/locales/messages/ar-AE.json";
import ru from "@/locales/messages/ru-RU.json";
import gb from "@/locales/messages/en-GB.json";

const messages = {
  "en-US": en,
  "en-GB": gb,
  "ar-AE": ar,
  "ru-RU": ru,
};

const i18n = createI18n({
  fallbackLocale: "en-US",
  messages,
});
  • locale - 초기 진입시 기본으로 설정될 언어
  • fallbackLocale - 기본 언어가 설정되어 있지 않을 경우, 설정될 언어

해당 프로젝트에서 fallbackLocalea만 지정해둔 이유는 사용자가 직접 언어를 고를 수 있도록 하거나,

사용자의 브라우저에서 사용하는 언어를 들고와서 설정할 예정이기에, fallbackLocale만 설정해두었습니다.

 

 

위와 같은 경우에선, 아무 언어를 설정하지 않았을때 영어가 프로젝트의 기본 언어로 세팅 될 것입니다.

 

  • locale에 있는 index.js는 message와 translationfiles를 load하는 것을 기억해주면 좋습니다.

테스트

기본적인 세팅은 모두 끝냈으니, 이제 테스트를 해봐야겠네요.

vue의 템플릿 내부에서 {{ $t('') }} 의 문자열 인자로 message에서 정의한 key 값을 넣어주면,

locale 정보가 바뀔때마다 해당 key값에 맞는 value가 들어가게 됩니다.

 

왼쪽은 ar을 설정했고, 오른쪽은 en일때 나오는 화면입니다.

i18n의 가장 기본적인 세팅을 마쳤습니다. 

 

 

참고 자료

https://blog.flycode.com/step-by-step-how-to-create-a-vue-multi-language-app-with-vue-i18n