반응형
API 서버에서 JSON Object 가져오기 vue-i18n을 사용한 Vue.js의 국제화
지금 나는 Vue.js에서 여러 언어를 지원하는 앱을 만들고 있어.그리고 나는 https://kazupon.github.io/vue-i18n을 이용하여 국제화를 구현했다.
프로젝트에서 정적 JSON 파일에서 API 호출 결과(axios, ajax, Vuex... 등)로 i18n의 메시지 파트를 변경하고 싶다.
API 서버에서 JSON 메시지 파일을 가져오고 동적 다중 언어 서비스를 지원하는 방법
좋은 생각 있어?미리 감사합니다!
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import EN from '@/COMMON/i18n/en.json'
import KO from '@/COMMON/i18n/ko.json'
import store from '@/COMMON/store/store'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: sessionStorage.LANG_CD,
fallbackLocale: 'ko',
silentTranslationWarn: true,
messages: {
en: EN,
ko: KO
// option 1. ko: axios ... some code
// option 2. ko: store.getters ... some code
},
});
export default {
i18n
}
게으른 번역 로드하기를 참조하십시오.
문서에서는 동적 가져오기를 사용하여 새 변환 파일을 가져온다.대신 API 호출로 수정할 수 있다.
예제:
// i18n-setup.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import axios from 'axios'
Vue.use(VueI18n)
export const i18n = new VueI18n({
locale: 'en',
fallbackLocale: 'en'
})
const loadedLanguages = []
function setI18nLanguage (lang) {
i18n.locale = lang
axios.defaults.headers.common['Accept-Language'] = lang
document.querySelector('html').setAttribute('lang', lang)
return lang
}
export function loadLanguageAsync (lang) {
if (loadedLanguages.includes(lang)) {
if (i18n.locale !== lang) setI18nLanguage(lang)
return Promise.resolve()
}
return axios.get(`/api/lang/${lang}`).then(response => {
let msgs = response.data
loadedLanguages.push(lang)
i18n.setLocaleMessage(lang, msgs.default)
setI18nLanguage(lang)
})
}
// router.js
router.beforeEach((to, from, next) => {
const lang = to.params.lang
loadLanguageAsync(lang).then(() => next())
})
반응형
'Programing' 카테고리의 다른 글
Java에서 날짜/시간 차이 계산 (0) | 2022.05.17 |
---|---|
플로트와 더블을 인쇄 및 공동 구분하는 방법 (0) | 2022.05.17 |
vue-roouter를 사용할 때 페이지 제목을 변경하는 방법 (0) | 2022.05.17 |
키가 상승했고 VueJs에Autocomplete으로 찾고 있다. (0) | 2022.05.17 |
C에서 텍스트 파일 한 줄씩 살펴보기 (0) | 2022.05.17 |