i18n 은 Internationalization
의 약어로 국제화를 의미한다.
i18n 은 SW 국제화
를 의미한다.
SW 국제화
는 SW 가 특정 지역 언어에 종속되지 않고, 작동하도록 설계하고 개발하는 과정이다.
Vue
에서 i18n 을 쉽게 사용할 수 있게 해주는 모듈
npm install vue-i18n
# or
yarn add vue-i18n
src/i18n.js
기초적인 i18n 설정을 해주는 파일이다.
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from '@/locales/en.json'
import ko from '@/locales/ko.json'
Vue.use(VueI18n)
export default new VueI18n({
locale: 'ko',
fallbackLocale: 'ko',
messages: { en, ko }
})
src/locales/ko.json
사용할 언어들의 일종의 언어팩이다.{"key":"value",...}
형태로 작성한다.
{
"message": "안녕 i18n !!"
}
src/locales/en.json
{
"message": "hello i18n !!"
}
src/main.js
i18n 을 사용하기 위해 Vue 생성자의 인자로 넣어준다.
import Vue from 'vue'
import App from './App.vue'
import i18n from './i18n'
Vue.config.productionTip = false
new Vue({
i18n,
render: h => h(App)
}).$mount('#app')
$t('key')
형태로 사용한다.
<template>
<div class="hello">
<p>{{ $t('message') }}</p>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
$i18n.locale
의 값을 변경한다.
<template>
<div class="hello">
<p>{{ $t('message') }}</p>
<button @click="changeLocale">변경</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
},
methods: {
changeLocale() {
if (this.$i18n.locale === 'en') return (this.$i18n.locale = 'ko')
this.$i18n.locale = 'en'
}
},
}
</script>