Este es mi código, que funciona sin problemas:
import { createI18n } from 'vue-i18n' import messages from './components/json/foo/foo_messages.json' const app = createApp(App) installI18n(app) const i18n = createI18n({ locale: 'ru', messages }) app .use(i18n) .use(vuetify) .mount('#app') Ahora necesito cargar mensajes también desde ./components/json/bar/bar_messages.json . Traté de hacer de esta manera:
import { createI18n } from 'vue-i18n' import foo_msg from './components/json/foo/foo_messages.json' import bar_msg from './components/json/bar/bar_messages.json' const app = createApp(App) installI18n(app) const i18n = createI18n({ locale: 'ru', messages: {foo_msg, bar_msg} }) app .use(i18n) .use(vuetify) .mount('#app')Pero no funcionó. ¿Alguien podría decir cómo hacerlo?
EDITAR : Este es mi archivo foo json
{ "ru": { "header": { "hello": "Привет" } }, "en": { "header": { "hello": "Hello" } } }y este es el archivo bar json
{ "ru": { "footer": { "bye": "Пока" } }, "en": { "footer": { "bye": "Goodbye" } } }Lo que estás tratando de hacer no es muy escalable. Dado el formato de los mensajes i18n JSON, debe fusionar los archivos de entrada en algo como esto:
{ "ru": { "header": { "hello": "Привет" }, "footer": { "bye": "Пока" } }, "en": { "header": { "hello": "Hello" }, "footer": { "bye": "Goodbye" } } } ... esto definitivamente es posible con JS, pero aún debe importar el archivo JSON para cada componente en su main.js que es tedioso y propenso a errores
¿Consideró usar bloques personalizados vue-i18n en sus componentes? Incluso puede conservar las traducciones en archivos JSON externos y usar un bloque personalizado como <i18n src="./myLang.json"></i18n>
este es un enfoque mucho mejor, pero si aún desea usar el suyo, aquí hay un código simple sobre cómo fusionar todos los archivos de traducción (objetos importados de JSON) en un solo objeto utilizable por vue-i18n:
// import foo_msg from './components/json/foo/foo_messages.json' const foo_msg = { "ru": { "header": { "hello": "Привет" } }, "en": { "header": { "hello": "Hello" } } } // import bar_msg from './components/json/bar/bar_messages.json' const bar_msg = { "ru": { "footer": { "bye": "Пока" } }, "en": { "footer": { "bye": "Goodbye" } } } const sources = [foo_msg, bar_msg] const messages = sources.reduce((acc, source) => { for(key in source) { acc[key] = { ...(acc[key] || {}), ...source[key] } } return acc },{}) console.log(messages)