Actualmente estoy tratando de encontrar una forma de cargar archivos de traducción desde un servidor y hacerlos accesibles en todos los componentes del proyecto.
Por ejemplo, puedo llamar a https://server.com/lang=de y obtener ese JSON
{ "DASHBOARD_SETTINGS": "Einstellungen", "DASHBOARD_CUSTOMERS": "Kunden", "DASHBOARD_CAMPAIGNS": "Kampagnen", "DASHBOARD_LOCATIONS": "Standorte", "DASHBOARD_DISPLAYS": "Displays" }Esta es mi estructura de archivos.
i18n_setup.js
import Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n) export const i18n = new VueI18n({ locale: 'de', fallbackLocale: 'en' }) const loadedLanguages = ['de'] 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 (typeof lang === 'undefined') { lang = window.navigator.userLanguage || window.navigator.language; lang = lang.slice(0,2); } if (loadedLanguages.includes(lang)) { if (i18n.locale !== lang) setI18nLanguage(lang) return Promise.resolve() } return fetch(`https://EXAMPLE.de/locales?lang=${lang}`) .then(response => { let msgs = response.data loadedLanguages.push(lang) i18n.setLocaleMessage(lang, msgs) return setI18nLanguage(lang) }); }enrutador.js
... router.beforeEach((to, from, next) => { const lang = to.params.lang loadLanguageAsync(lang).then(() => next()) })aplicación.js
... // i18n import { i18n } from './i18n_setup' ... const app = new Vue({ store, i18n, el: '#app', components: { App }, router });Dashboard.vue
import { loadLanguageAsync } from '../i18n_setup'Puedo ver que las traducciones se cargan a través de la pestaña de red del navegador, pero cuando intento acceder a una traducción con, por ejemplo , {{ $t('DASHBOARD_SETTINGS') }} , aparece una advertencia o un error.
[vue-i18n] No se puede traducir el valor de la ruta de acceso clave 'DASHBOARD_SETTINGS'. Utilice el valor de keypath por defecto.
¿Alguna idea de lo que me estoy perdiendo?
fetch devuelve un objeto de tipo Response . Está accediendo a response.data que no existe en ese objeto ( let msgs = response.data )
Para extraer los datos de la respuesta, use response.json()
return fetch(`https://EXAMPLE.de/locales?lang=${lang}`) .then(response => response.json()) .then(msgs => { loadedLanguages.push(lang) i18n.setLocaleMessage(lang, msgs) return setI18nLanguage(lang) });