Vue 에서 다국어 처리 - 기초

Vue 에서는 i18n 을 사용하여 매우 쉽게 다국어 처리를 구현할 수 있습니다.

 

vue i18n의 소개 사이트는 다음과 같습니다. https://kazupon.github.io/vue-i18n/started.html

Getting started | Vue I18n

vuetify 나 quasar 와 같은 프레임워크를 사용하시는 경우는 프레임워크 설치시 이미 포함되어 설치되지만 프레임워크 없이 사용하시는 경우 아래와 같이 입력하여 설치합니다.

■ vue-cli 3

vue add i18n

■ vue-cli 2

npm i vue-i18n --save

install 후 main.js 를 약간 수정하여 i18n을 사용할 수 있게 준비해 줍니다.

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const messages = {
  en: {
    message: {
      hello: 'hello, buddy!'
    }
  },
  ko: {
    message: {
      hello: '안녕 친구!'
    }
  }
}

const i18n = new VueI18n(
  {
    locale: 'ko',
    messages
  }
)

new Vue({
  i18n, // i18n 외의 나머지 부분은 참고만 하세요. 사용자 환경마다 다를 수 있습니다.
  router,
  store,
  render: h => h(App)
}).$mount('#app')

위와 같이 작성하여 hello 라는 단어에 대해 영어, 한글 두가지로 다국어를 지원할 수 있게 준비하였습니다.

 

이제 다국어를 사용하여 vue 파일을 작성합니다. $t(다국어 코드) 로 작성합니다.

<template>
  <p>{{$t('message.hello')}}</p>
</template>

그리고 사용자 PC 설정에 맞는 locale 이 자동으로 설정되도록 App.vue에 코드를 작성해 줍니다.

<template>
...
</template>
<script>
  export default {
    created () {
      let locale = navigator.language || navigator.userLanguage
      locale = locale.substring(0, 2)
      if (locale !== 'ko') locale = 'en' // 한국어가 아닌 경우 무조건 영어로 설정
      this.$i18n.locale = locale
    }
  }
</script>

사용자가 locale을 직접 바꾸게 하고 싶으신 경우 버튼이나 list component를 만들어서 this.$i18n.locale 에 사용하고자 하는 언어 코드를 입력하게 event를 구성하시면 됩니다.

 

▶ 추가 팁

다국어 메시지 중간에 변수값이 들어가도록 하고 싶으신 경우

 

예) 안녕하세요. XXX 님.

 

1. 변수명 지정

- Locale message

const messages = {
  ko: {
    message: {
      hello: '안녕하세요. {user}님.'
    }
  }
}

- Template

<p>{{ $t('message.hello', { user: '펭수' }) }}</p>

- Output

안녕하세요. 펭수님.

2. 순서 지정

- Locale message

const messages = {
  ko: {
    message: {
      hello: '안녕하세요. {0}님.'
    }
  }
}

- Template

<p>{{$t('message.hello', ['펭수'])}}</p>

- Output

안녕하세요. 펭수님.

이상 간단히 Vue 에서 다국어 사용에 대해 설명드렸습니다.

 

추가적인 내용은 아래 포스팅을 참고하세요.

 

감사합니다.

 

* json 파일을 이용한 메시지 관리

Vue에서 다국어 처리 - JSON 파일을 이용한 관리

* db를 활용한 메시지 관리

Vue에서 다국어 처리 - DB 로 다국어 관리