[vue.js] 다국어 적용하기 - i18n

 

 

Vue.js에서 사용자의 선택에 따라 한국어 또는 영어 두가지의 다국어를 적용시키는 방법!🤔

 

(저는 vue3에서 진행했습니다!)

 

 

우선 다국어를 적용 시키기 위해 프로젝트에 vue-i18n (다국어 처리를 쉽게 도와주는 라이브러리)을 설치합니다.

 

npm install vue-i18n

 

 

 

설치 후 저는 경로를 아래와 같이 잡았고, 언어는 각각의 json 파일로 분리 시켜 관리가 편하도록 하였습니다

 

src/               
...
├── i18n           
│   └── i18n.js    
├── locales  
│   ├── ko.json 
│   └── en.json  
├── store          
│   └── index.js
├── App.vue         
└── main.js

 

 

 

그리고 i18n에 대한 설정을 잡아주기 위해서 i18n.js 파일에는 아래와 같이 설정을 추가해주었습니다.

 

// i18n.js

import { createI18n } from 'vue-i18n'
import ko from '@/locales/ko.json'
import en from '@/locales/en.json'

export const i18n = new creatI18n({
    locales: 'ko',
    fallbacklocale: 'en', 
    messages: {
    	'ko': ko,
        'en': en
    }
})

locales는 기본으로 적용될 다국어, fallbacklocale에는 다국어 처리가 되어있지 않을 경우 적용될 언어입니다.

 

 

 

각각의 다국어 파일에는 아래와 같이 작성해줍니다.

key와 value값을 넣어 작성해줍니다.

 

// ko.json
{
    "titleCd" : "제목",
    "bananaCd" : "바나나"
}


// en.json
{
    "titleCd" : "title",
    "bananaCd" : "banana"
}

 

 

 

테스트용 다국어를 넣어준 후에 main.js에 아래와같이 추가해줍니다!

 

// main.js

import { createApp } from "vue"
import App from "./App.vue"
import store from "./store"
import { i18n } from "./i18n/i18n"    // 추가


const app = createApp(App);
app.use(store)
   .use(i18n)         // 추가
   .mount("#app")

따로 i18n.js로 설정값을 빼주었던 것을 main.js에서 import하여 가져옵니다👏

 

 

이렇게 설정은 끝!

 

 

 

 

 

이제 화면에만 잘 나오게.....

 

 

 

 

 

 

테스트용 view를 만들고 아래와 같이 다국어 테스트용 ui 생성해줍니다.

 

// Test.vue

<template>
	<div>
    	<h1> 다국어 적용 테스트 </h1>
        <p> {{ $t('titleCd') }} </p>
        <p> {{ $t('bananaCd') }} </p>
        <button @click="$i18n.locale='ko'"> 한국어 </button>
        <button @click="$i18n.locale='en'"> 영어 </button>
    </div>
</template>

<script>
</script>

 

 

기본으로 설정된 언어로 먼저 화면에 보여지게 됩니다.

 

Test.vue 실행화면

 

 

한국어 버튼을 누르면 다국어 코드가 적용된 부분의 언어가 한국어가 적용이 되고, 영어 버튼을 누르면 영어로 변하게 됩니다.

 

 

 

다음번에는 셀렉트박스로 다국어 설정을 하고 변경될때마다 로컬스토리지에 저장하여 다른 뷰로 넘어갈때 초기화되지 않게 해보겠습니당