Интернационализация в Vue.js с использованием vue-i18n получения объекта JSON с сервера API - PullRequest
Новая
       33

Интернационализация в Vue.js с использованием vue-i18n получения объекта JSON с сервера API

1 голос
/ 17 апреля 2019

Сейчас я создаю приложение в Vue.js, которое поддерживает несколько языков.И я реализовал интернационализацию, используя https://kazupon.github.io/vue-i18n.

Я хочу изменить получение части сообщения в i18n из статического файла JSON в проекте на результат вызова API (axios, ajax, Vuex ... и т. Д.).

Как я могу получить файлы сообщений JSON с API-сервера и поддерживать динамический многоязычный сервис ??

Есть идеи?Заранее спасибо! 

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
}

1 Ответ

2 голосов
/ 17 апреля 2019

Пожалуйста, смотрите Ленивая загрузка переводов .

В документе используется динамический импорт для импорта новых файлов перевода. Вместо этого вы можете изменить свой вызов 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())
})
...