Tengo una aplicación que se usa en todo el mundo y mi empresa está en proceso de cambio de marca para algunos mercados.
Por ejemplo, en EE. UU. y Canadá se nos conoce como "Acme Company", pero ahora queremos que se nos conozca como "Acme Company" en EE. UU. y como "Foo Company en Canadá".
Actualmente, nuestros archivos de traducción vue-18n están llenos de "Acme Company" dentro de las traducciones, por ejemplo:
TITLE_WELCOME_MSG: 'Acme Company lorem ipsum dolor sit amet, consectetur adipiscing elit.'Lo que estoy tratando de hacer es algo como esto:
TITLE_WELCOME_MSG: '{companyBrand} lorem ipsum dolor sit amet, consectetur adipiscing elit.' Lo que luego requiere que actualice la implementación de TITLE_WELCOME_MSG para pasar ahora companyBrand de esta manera:
this.$t('TITLE_WELCOME_MSG', { companyBrand: getCompanyBrandBasedOnDomain() }) Sin embargo, ahora necesito hacer esto en cientos de lugares (aparentemente nos gusta mucho decir nuestro nombre). Sería mejor si pudiera proporcionar companyBrand a la instancia i18n en la compilación y actualizaría automáticamente todas las traducciones con esa variable. Entonces no necesitaría actualizar cientos de lugares.
Queremos que todas las configuraciones regionales vean el mismo texto, por lo que si se encuentra en Canadá en cualquier configuración regional, verá "Foo Company". Además, si es posible, también espero excluir a "Acme Company" de cualquier código fuente.
¿Hay alguna forma de configurar variables dentro de la instancia vue-i18n que se traduzcan todas de la misma manera sin tener que actualizar todas las implementaciones?
Si necesita un comportamiento personalizado, es preferible usar funciones personalizadas que se adapten a él en lugar de modificar la biblioteca de terceros que no deberían estar al tanto de su caso.
Las funciones vue-i18n tienen argumentos variados, algunas firmas se pueden descartar para facilitar la implementación. Es más limpio usar otro nombre de función para no interferir con los nombres de la biblioteca, pero podrían reemplazarse por un reemplazo directo:
Vue.use(VueI18n); Vue.use({ install() { Vue.prototype._orig$t = Vue.prototype.$t; Vue.prototype.$t = function (path, values = {}) { return this._orig$t(path, { companyBrand: '...', ...values }; } } ); Lo mismo para $tc , etc. si es necesario.
Otra opción probablemente sería usar un formateador . Dado que el formateador base no está expuesto públicamente, debe volver a implementarse o extenderse desde i18n.formatter , y esto se vuelve complicado en este punto.