vue-i18n pure js 에 적용하면서 생긴 문제 해결

상황:

Vue에서 i18n을 적용하는데 pure js에는 vue-i18n 의 t() 메소드가 제대로 적용이 안되고 오류 발생.

해결:

- main.js에 위치한 i18n 관련 코드들을 따로 js 파일로 분리(예: i18n.js)

- 해당 i18n.js 파일에서 export default new VueI18n({..}) 와 같이 해주기

- main.js에서 i18n.js 파일을 import 하고 이를 global.vue = new Vue({.., i18n, ..}) 의 i18n 옵션에 설정

(global.vue = new Vue에 i18n을 설정하는 것은 Vue 프로젝트에서 전역으로 사용하겠다는 것)

- 사용하려는 pure js에서 i18n.js 를 import 하면 t() 메소드 사용이 되면서 해결.

코드로 과정을 설명하면

// main.js

import Vue from 'vue'

import VueI18n from 'vue-i18n'

..

Vue.use(VueI18n)

..

const i18n = new VueI18n({

    ..

    messages: {

        'A': require('@/locales/A.json')

    }

})

과 같이 main.js 에 i18n 관련 코드들이 위치할때 이들을 i18n.js 로 빼놓는다.

// i18n.js

import Vue from 'vue'

import VueI18n from 'vue-i18n'

..

Vue.use(VueI18n)

..

const i18n = new VueI18n({

    ..

    messages: {

        'A': require('@/locales/A.json')

    }

})

export default new VueI18n({ <- 이렇게 new VueI18n 객체를 export 시키자

    ..

    messages: {

        'A': require('@/locales/A.json')

    }

})

이제 다른 pure javascript 파일에서 i18n 함수를 사용한다면 import i18n from '@/i18n' 와 같이 하면 됨.

$t 메서드를 사용하려고 한다면 i18n.t(~~) 와 같은 형태로 사용이 가능.