[英]Internationalization in Vue.js using vue-i18n getting JSON Object from API server
現在我正在 Vue.js 中構建一個支持多種語言的應用程序。 我使用https://kazupon.github.io/vue-i18n實現了國際化。
我想將 i18n 中的獲取消息部分從項目中的靜態 JSON 文件更改為 API 調用結果(axios、ajax、Vuex ...等)。
如何從 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())
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.