vue i18n 사용하기

vue에서 다국어를 사용하기위해 i18n을 사용하는 방법에 대해서 정리해 보겠습니다. 

vue i18n 사이트 https://kazupon.github.io/vue-i18n/

vue-cli 3버전이상을 사용하시는 분은 아래와 같이 쉽게 패키지 추가가 가능합니다.

> vue add i18n  

명령어를 실행하면 몇가지 질문이 나옵니다. 

The locale of project localization. en

? The fallback locale of project localization. en

? The directory where store localization messages of project. It's stored under `src` directory. locales

? Enable locale messages in Single file components ? No

모두 default로 설정한후 실행하면 아래와 같이 파일이 추가됩니다. 

 .env

 src/i18n.js

 src/locales/en.json

 vue.config.js

 package.json

 src/main.js

 yarn.lock

vue-cli를 이용해서 프로젝트를 생성하였기 떄문에 HelloWorld.vue 파일을 수정해 보겠습니다.

<template>
  <div class="hello">
    {{$t('message')}}
    <button @click="$i18n.locale='ko'">한국어</button>
    <button @click="$i18n.locale='en'">English</button>
  </div>
</template>

vue에서 다국어는 $t(키) 형식으로 사용합니다. 

locales 폴더에 추가로 ko.json이라는 파일을 추가해 봅니다. 

en.json

{
  "message": "hello i18n !!"
}

ko.json

{
  "message": "안녕 i18n !!"
}

i18n에 locale정보가 ko일때는 ko.json파일에서 키를 찾아서 반환하고, en일 경우 en.json에서 파일을 찾아 반환합니다. 

javascript에서 사용하고 싶을때는 아래와 같이 사용합니다. 

this.$t('message')