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

안녕하세요. 이전에는 Vue 다국어 처리시 i18n의 기본적인 사용방법에 대해 적었습니다.

 

https://dong-queue.tistory.com/59 

Vue 에서 다국어 처리 - 기초

이번에는 실제 사용할 다국어 메시지를 관리하는 법에 대해 적어볼려고 하는데

 

샘플 코드를 받아보면 대부분 JSON 파일로 되어 있기 때문에 우선은 JSON 파일을 관리하는 법에 대해 설명하겠습니다.

 

1. 디렉토리 구조

어떻게 구성해도 상관은 없지만 저는 언어코드>주제 순으로 구조를 짜겠습니다.

json 파일에는 json 포맷으로 실제 필요한 코드와 언어별 변환 값을 입력하시면 됩니다.

이제 @/lang/index.js 를 작성해 보겠습니다.

lang의 index.js에서는 하위의 json파일을 읽고 하위 디렉토리 또는 파일명을 읽어 message의 하위 속성으로 자동으로 등록합니다.

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

// json 파일을 읽어들이기 위한 function
const requireLang = require.context(
  '@/lang',
  true,
  /\.json$/
)
const messages = {}

// json file read
for (const file of requireLang.keys()) {
  if (file === './index.js') continue // index.js 파일 제외
  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(VueI8n)

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

export default i18n

이제 마지막으로 main.js 에 위에서 작성한 i18n을 사용하도록 코드를 추가합니다.

import '@babel/polyfill'
import Vue from 'vue'
import { router } from './router'
import { sync } from 'vuex-router-sync'
const App = () => import('./App')
import store from './store/store'
import i18n from '@/lang' // lang 디렉토리의 index.js 를 읽어옴.

sync(store, router)

/* eslint-disable no-new */
new Vue({
  i18n, // 위에서 읽어온 i18n 다국어 코드를 vue에 적용
  router,
  store,
  render: h => h(App)
}).$mount('#app')

자 이제부터는 이전에 설명한대로 다국어 코드를 사용하기만 하면 됩니다.

예) $t('common.requiredItem')

 

참 쉽죠? :) 

 

추가 팁으로 사용자 브라우저의 언어설정에 맞춰 다국어 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>

다음에는 다국어코드를 json이 아닌 DB로 관리하는 법에 대해 설명드리겠습니다.

 

감사합니다.