[Vue.js] 다국어 처리 - i18n활용하기

최근에 코로나 정보와 관련된 사이트를 제작하며

사이트의 취지에 적합하게 구현하려면 다국어 처리가 필요했습니다.

한글과 영어 두가지 언어를 지원하기 위해 활용한 i18n 활용법에 대해 포스팅합니다.

---

1. i18n 설치

제일 좋은 참고자료는 공식사이트입니다.

저도 공식 사이트를 보고 따라서 진행했습니다.

https://kazupon.github.io/vue-i18n/installation.html#compatibility-note

Installation | Vue I18n

저는 vue-cli를 활용하고 있어서 아래와 같이 모듈을 추가해주었습니다.

vue add i18n

vue.config.js파일에 아래와 같이 설정을 추가해주세요

module.exports={
    pluginOptions: {
      i18n: {
        locale: 'en',
        fallbackLocale: 'en',
        localeDir: 'locales',
        enableInSFC: false
      }
    },
    chainWebpack: config => {
        config.module
            .rule("i18n")
            .resourceQuery(/blockType=i18n/)
            .type('javascript/auto')
            .use("i18n")
            .loader("@kazupon/vue-i18n-loader")
            .end();
    }
}

위의 코드에서 보이듯이 다국어 데이터가 담긴 파일은 locales라는 폴더에 저장되어야 합니다.

2. 사용

버튼 클릭 시 언어가 변하는 예시를 통해 사용법을 보겠습니다.

1) 언어 변경

직접 i18n의 locale값을 변경해 언어를 동적으로 변경할 수 있습니다.

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

2) locale 데이터 활용

다국어 데이터는 json형태의 파일에 담기게 됩니다.

src>locales라는 디렉토리 안에 ko.json, en.json이라는 두개의 파일을 생성합니다.

 

en.json

{
  "message": "hello i18n!"
}

ko.json

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

이렇게 파일을 생성해두면 locale정보에 알맞게 파일에서 해당하는 키에 맞는 값을 반환해냅니다.

 

<template> 안에서 활용할 때는 아래와 같이 활용하며

{{$t('key')}}

데이터가 json형태를 띄고 있다는 것을 감안하면

한 키 안에 여러개의 데이터가 중첩된 형태라면 아래와 같이 활용하면 된다. 

{{$t('key1.key2')}}

javascript에서 활용할 때는 아래와 같이 활용 가능하다.

this.$t('message')
this.$t('key1.key2')

// locale 변경 시
this.$i18n.locale = 'en'

 

기본적인 활용법을 기준으로 작성했는데 다양한 활용법을 더 알고싶다면 공식 사이트를 참조하면 될것 같다!