Tengo un proyecto que usa vue-i18n para traducciones. Este proyecto se publica en 2 servidores, el servidor 1 es solo en inglés, el servidor 2 es solo en sueco. Ahora quiero excluir idiomas que no son necesarios. En el servidor 1 quiero excluir el sueco y solo cargar el inglés, el servidor 2 excluye el inglés y solo carga el sueco. ¿Es eso posible? Tengo traducciones en componentes y en archivos locales/*.json.
En mi archivo de configuración i18n:
import Vue from 'vue' import VueI18n from 'vue-i18n' Vue.use(VueI18n) function loadLocaleMessages () { const locales = require.context('@/locales', true, /[A-Za-z0-9-_,\s]+\.json$/i) const messages = {} locales.keys().forEach(key => { const matched = key.match(/([A-Za-z0-9-_]+)\./i) if (matched && matched.length > 1) { const locale = matched[1] messages[locale] = locales(key) } }) return messages } export default new VueI18n({ locale: process.env.VUE_APP_LANG || 'en', fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en', messages: loadLocaleMessages(), silentFallbackWarn: true })En mi archivo vue.config.js:
pluginOptions: { i18n: { locale: process.env.VUE_APP_LANG, fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE, localeDir: "locales", enableInSFC: true, }, },Una solución es implementar un archivo de configuración que especifique qué configuraciones regionales están habilitadas. Luego, la aplicación podría obtener ese archivo y leer la configuración para determinar qué mensajes locales cargar.
Por ejemplo, implemente config.json en su directorio estático (p. ej., public/ en el proyecto con scaffolding de la CLI de Vue).
Servidor 1: solo en inglés
// public/config.json { "locales": ["en"] }Servidor 2: solo sueco
// public/config.json { "locales": ["sv"] }aplicación:
// i18n.js async function loadLocaleMessages () { const locales = require.context('@/locales', true, /[A-Za-z0-9-_,\s]+\.json$/i) const messages = {} const res = await fetch(process.env.VUE_APP_BASE_URL + '/config.json') const config = await res.json() locales.keys() .filter(locale => config.locales.includes(locale)) 👈 .forEach(key => { const matched = key.match(/([A-Za-z0-9-_]+)\./i) if (matched && matched.length > 1) { const locale = matched[1] messages[locale] = locales(key) } }) return messages } El complemento tendría que ser async :
// i18n.js export default async () => { return new VueI18n({ locale: process.env.VUE_APP_LANG || 'en', fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en', messages: await loadLocaleMessages(), silentFallbackWarn: true }) } // main.js import i18n from './i18n' (async() => { new Vue({ i18n: await i18n() }) })()