vue-cli 에서 다국어 처리

vue 웹에서 다국어 처리를 하기 위해 사용한 vue-I18n에 대해 알아보자.

vue-i18n의 공식문서를 참고하며 진행해보자

설치 방법으로는

<!-- html파일 -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

<div id="app">
  <p>{{ $t("message.hello") }}</p>
</div>

$ npm install vue-i18n

$ yarn add vue-i18n

그리고 vue-cli의 @/src/plugins 폴더에 플러그인 파일을 생성해준다.

<!-- i18n.js -->

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

Vue.use(VueI18n)

main.js에서 vue 인스턴스에 i18n을 등록해야한다.

<!-- main.js -->
...
import i18n from '@/plugins/i18n'

new Vue({
	...,
  	i18n,
  	...
}).$mount('#app')

여기까지 했다면 기본적인 vue-i18n에 대한 세팅은 되었고, VueI18n의 option을 추가하여 locale별 언어가 변할 수 있도록 추가 개발을 한다.

<!-- i18n.js -->

const messages = {
  en: {
    message: {
      hello: 'hello world'
    }
  },
  ja: {
    message: {
      hello: '안녕 세상'
    }
  }
}

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

이렇게 하면 아래와 같이 en의 message.hello가 렌더링 된다.

<div id="#app">
  <p>hello world</p>
</div>

하지만 다국어를 조금더 효율적으로 처리하기 위해 언어별 json 파일로 vue-18n의 locale을 처리해보자.

원하는 위치에 다국어 json파일을 생성 (필자는 root에 locale 폴더)했다.

//	파일위치: 'locale/en.json 
{
  "message": {
    "hello": "hello world"
  }
}

//	파일위치: 'locale/ko.json 
{
  "message": {
    "hello": "안녕 세상"
  }
}

그리고 plugins/i18n.js 파일에서 해당 json 파일을 Import 한다.

<!-- i18n.js -->

...

import en from 'locale/en.json'
import ko from 'locale/ko.json'

const message = {
  en, ko
}

const i18n - new VueI18n({
	locale: 'ko',
  	messages
})
export default i18n

이렇게 하면 en.json과 ko.json을 VueI18n을 통해 다양하게 serve할 수 있다
그리고 아래와 같은 전역 메소드를 통해 VueI18n의 locale을 자유롭게 변경시켜 다국어를 구현할 수 있다

this.$i18n.localse = 'en'

이상 vue-i18n을 통해 다국어 페이지를 만들어보는 방법을 알아보았다.