[Vue js] i18n 을 이용하여 다국어 설정

i18n

---

i18n 은 사전적 의미로 국제화라는 뜻을 가지고 있다.

서비스는 다양한 사람들이 사용할 수 있으므로 편리성을 위해 각 나라에 맞는 언어로 번역해서 제공하는 것이 좋다.

 

프론트엔드 부분에서는 이러한 언어도 신경써야 하는데 i18n 라이브러리를 사용하면 손쉽게 해결할 수 있다.

 

 

 

 

vue i18n 설치

---

npm install vue-i18n
# or
yarn add vue-i18n

 

 

 

 

 

기본설정

---

프로젝트 구조는 다음과 같다.

 

src 하위에 locales 폴더를 만든다.

 

그후 원하는 언어폴더를 만들고 그 하위에 동일한 이름의 json 파일을 만든다. 

폴더명과 json 이름은 자유다.

 

하지만 알아보기 쉽게 해당 나라를 쉽게 파악할 수 있는 폴더명이 좋다.

 

다음으로 src 밑에 i18n.js 파일을 만든다.

 

 

message.json 파일

 

en → message.json

{
    "required": "required",
    "requiredItem": "requiredItem"
}


ko → message.json

{
    "required": "필수여부",
    "requiredItem": "필수항목"
}

 

i18n.js

 

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

// json 파일을 읽어들이기 위한 function
const requireLang = require.context(
  '@/locales',    // 폴더명 입니다.
  true,
  /\.json$/       // 폴더 아래 json 찾기용
)

const messages = {}

// json file read
for (const file of requireLang.keys()) {
  const path = file.replace(/(\.\/|\.json$)/g, '').split('/')  // 폴더 패스

  path.reduce((o, s, i) => {
    if (o[s]) return o[s]

    o[s] = i + 1 === path.length
      ? requireLang(file)
      : {}

    return o[s]
  }, messages)

}

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'ko', // 기본 locale
  fallbackLocale: 'ko', // locale 설정 실패시 사용할 locale
  messages, // 다국어 메시지
  silentTranslationWarn: true // 메시지 코드가 없을때 나오는 console 경고 off
})

export default i18n

 

main.js

 

import Vue from 'vue'
import App from './App.vue'
import i18n from './i18n'

Vue.config.productionTip = false

new Vue({
  i18n,
  render: h => h(App),
  data: {
    foo:"test"
  }
}).$mount('#app')

 

 

 

 

 

사용방법

---

사용방법은 다음과 같다.

{{ $t('  json파일명.변수명 ') }}

 

여기서 언어를 바꾸고 싶으면 i18n 객체의 locale 값을 변경해주면된다. 

 

<template>
  <div>
    메인 페이지 입니다.
    <p>{{ $t('message.required') }}</p>
    <test-page ref="test"></test-page>
    <select v-model="locale" v-on:change="changeLo">
        <option selected>선택하세요</option>
        <option value="ko">한국어</option>
        <option value="en">영어</option>
    </select>
  </div>
</template>

<script>
import TestPage from './TestPage.vue';
export default {
    data() {
        return {
            locale:'선택하세요',
        }
    },
    components: {
        TestPage,
    },
    methods: {
        changeLo() {
            // i18n.js 에서 const = i18n 이라고 선언했었음.
            this.$i18n.locale = this.locale;
        }
    }
}
</script>

<style>

</style>

 

 

아까 i18n.js에 설정한 i18n 객체이다.

 

이 값은 main.js에서 i18n을 Vue에 등록해 주었기 때문에

 

this.$i18n 으로 접근할 수 있다.

 

const i18n = new VueI18n({
  locale: 'ko', // 기본 locale
  fallbackLocale: 'ko', // locale 설정 실패시 사용할 locale
  messages, // 다국어 메시지
  silentTranslationWarn: true // 메시지 코드가 없을때 나오는 console 경고 off
})

 

 

 

 

 

결과

---

 

 

 

끝

---