[Vue.js] 다국어 처리 (vue-i18n 사용)

다국어 처리란?

어느 프로젝트에서나 다국어처리가 필요하다. 왜냐하면 언어 string이나 Image 등 국가나 문화에 관련되는 모든 것들은 리소스 별개로 관리해야하기 때문이다. 그렇다면 다국어 처리란 무엇일까?

 

다국어 처리는 웹 브라우저를 사용하는 국가에 따라 다양한 언어 등을 지원하는 서비스를 의미한다. 이는 기술 변경 없이 바로 적용할 수 있어야한다.

 

Vue.js에서는 vue-i18n 라이브러리를 사용하여 쉽게 프로젝트의 다국어 처리를 해줄 수 있다.  

kazupon.github.io/vue-i18n/started.html#html

Getting started | Vue I18n

 

설치

npm i vue-i18n --save

 

언어에 관련된 js 파일은 따로 관리해주기 위하여 src/locales/i18n.js 라는 파일을 생성했다.

디렉토리 구조는 나중에 main.js로 올바른 path를 import만 해준다면 큰 상관이 없다.

 

 

i18n.js

// src/locales/i18n.js

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

Vue.use(VueI18n) //Vue에게 i18n 을 사용하겠다고 명시

const messages = {
    ko: {

    },
    en: {

    },
}

export const i18n = new VueI18n({
    locale: 'ko', // 기본 언어
    fallbackLocale: 'en', // 기본 언어 표시에 문제가 있을 경우 대체할 언어
    messages,
})

위의 예제에서는 한국어와 일본어를 제공하는 경우의 다국어 처리 js 파일이다. 

locale 옵션을 사용하여 기본으로 제공될 언어를 선택할 수 있고, 만약 기본 언어에 문제가 있을 때 fallbackLocale 옵션을 사용하여 대체할 언어도 선택이 가능하다.

마지막으로 어떤 언어들을 다국어에 사용할지를 명시해주면 된다.

 

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import axios from 'axios'
import store from '@/store/index.js'

import { i18n } from '@/locales/i18n'

Vue.prototype.$eventBus = new Vue();
Vue.prototype.$axios = axios

export default new Vuetify({
  icons: {
    iconfont: 'md' // 'md' || 'mdi' || 'fa' || 'fa4' 
  }
})

Vue.use(Vuetify)

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  vuetify: new Vuetify(),
  store,
  i18n
})

main.js에서는 다국어 처리 js 파일을 import 하여 Vue 인스턴스에서 사용하겠다고 명시해주는 것을 볼 수 있다.

 

이제 Vue 프로젝트에서 다국어 처리를 시작할 준비가 됐다.

 

 

// src/locales/i18n.js

const messages = {
    ko: {
        "textBanana": "바나나",
        "textApple": "사과",
    },
    en: {
        "textBanana": "Banana",
        "textApple": "Apple",
    },
}

다국어 처리는 key와 value로 이루어진다는 것을 확인할 수 있다.

 

<template>
  <v-app>
    <div>{{ $t("textBanana") }}</div>
    <div>{{ $t("textApple") }}</div>
  </v-app>
</template>

template 내부에서 사용한다면 다음과 같이 $t("key") 로 바나나, 사과를 출력할 수 있다.

 

<script>
export default {
  data() {
    return {
      stringBanana: this.$i18n.t("textBanana"),
      stringApple: this.$i18n.t("textApple"),
    };
  },
};
</script>

반면, script 내부에서 사용한다면 this.$i18n.t("key")의 형식으로 사용해야한다.

 

 

<template>
  <v-app>
    <v-btn @click="changeLocale">Click To Change Locale</v-btn>
    <div>{{ $t("textBanana") }}</div>
    <div>{{ $t("textApple") }}</div>
  </v-app>
</template>

<script>
export default {
  methods: {
    changeLocale() {
      this.$i18n.locale = "en";
    },
  },
};
</script>

다음은 버튼을 누르면 기본 언어였던 한국어에서 영어로 바뀌는 예제이다. i18n의 locale 옵션을 활용한다면 여러 언어를 지원하는 사용하는 페이지를 더 쉽게 구현할 수 있을 것 같다.