Vue i18n

I18n

vue에서 다국어를 처리 할 때 사용

명령어 : npm install vue-i18n

• main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import i18n from './locales';

new Vue({
  router,
  store,
  i18n,
  render: (h) => h(App),
}).$mount('#app');

• localse/index

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from './en'
import ko from './ko'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: "ko", //기본 언어 한글
  fallbackLocale: "en", //실패 시 적용될 언어
  messages: { en, ko }, // 메세지 설정
})
export default i18n

• en.json

{
    "button": {
        "change": "en/kr chang"
    }
  }

• ko.json

{
    "button": {
        "change": "한/영 변경"
    }
  }

• HelloWorld.vue

<template>
<button @click="changeLocale">{{ $t('button.change') }}</button>
</template>
<script>
  export default {
    methods: {
      changeLocale() {
        if (this.$i18n.locale === 'en') return (this.$i18n.locale = 'ko')
        this.$i18n.locale = 'en'
      }
    }
  }
</script>