La solución de internacionalización definitiva de Nuxt: I18n+Nuxt Content
Con la ola de viajes al extranjero, Vue y Nuxt, que se utilizan ampliamente en China, a menudo enfrentan problemas de internacionalización.
Si se trata de WordPress, es simple: instale un complemento, configure la interfaz de traducción de Google y luego el sistema traducirá automáticamente el contenido nuevo a varias versiones de idiomas todos los días.
Pero para otros sistemas no es tan conveniente.
El código es de código abierto: https://github.com/aigc-projects/nuxt-i18n-starter
1. Internacionalización básica-I18n
nuxt-i18n
1. ¿Qué es I18n?
I18n es imprescindible para la internacionalización de Nuxt. Proporciona principalmente un conjunto completo de soluciones de internacionalización, incluido el enrutamiento de internacionalización y métodos para cambiar de idioma según el enrutamiento de internacionalización.
2. Instale I18n
Todo lo siguiente está bien.
hilo agregar @nuxtjs/i18n # hilo npm i @nuxtjs/i18n # npm pnpm i @nuxtjs/i18n pnpm agregar @nuxtjs/i18n@next --save-dev3. Configurar nuxt.config.ts
módulos: [ '@nuxtjs/i18n', ], i18n: { locales: [ { nombre: "English", código: "en", iso: "en-US", dir: "ltr" }, { nombre: " español",código: "es", iso: "es-LA", dir: "ltr" }, { nombre: "En français",código: "fr", iso: "fr-FR", dir: "ltr " }, { nombre: "العربية", código: "ar", iso: "ar-EG", dir: "rtl" },], defaultLocale: "en", detectBrowserLanguage: false, // 👇 Haga referencia a Vue I18n archivo de configuración vueI18n: "./i18n.config.js", }, 4. Configurar i18n.config.ts
Cree nuevos i18n.config.ts o i18n.config.js
Este archivo se utiliza para configurar campos de traducción.
export default defineI18nConfig(() => ({ Legacy: false, // 👇 Agregar mensajes de traducción: { "en": { nav_about: "About", }, "es": { nav_about: "sobre", }, "ar ": { nav_about: "نبذة عنا", }, "fr": { nav_about: "Acerca de", }, }, }))
5. Vincular componentes
código
uso
{{ $t('nav_home') }}
6. Componente de cambio de idioma
código
<!-- components/LangSwitcher.vue -->
<script setup lang="ts">
// Used for type casting
// Used for type casting
import type { LocaleObject } from "@nuxtjs/i18n/dist/runtime/composables";
// Get active locale and supported locales
const { locale, locales } = useI18n()
// Cast to avoid TypeScript errors in template
const supportedLocales = locales.value as Array<LocaleObject>
const router = useRouter()
const switchLocalePath = useSwitchLocalePath()
// When the visitor selects a new locale, route to
// to the new locale's path e.g. /en-CA/foo → /ar-EG/foo
function onLocaleChanged(event: Event) {
const target = event.target as HTMLInputElement
// switchLocalePath('ar-EG') will return Arabic equivalent
// for the *current* URL path e.g. if we're at /en-CA/about,
// switchLocalePath('ar-EG') will return '/ar-EG/about'
router.push({ path: switchLocalePath(target.value) })
}
</script>
<template>
<div>
🌐
<select :value="locale" @change="onLocaleChanged">
<option v-for="loc in supportedLocales" :key="loc.code" :value="loc.code">
{{ nombre.localización }}
</option>
</select>
</div>
</template>
uso
Utilice etiquetas en una página o diseño:
7. Obtenga el idioma actual
context.app.i18n.locale // donde tienes acceso a NuxtContext this.$i18n.locale //en el componente $i18n.locale // en la plantilla2. Internacionalización del contenido del documento
El uso exclusivo de I18n puede lograr completamente la internacionalización de todo el sitio. Pero si el sitio web tiene muchos artículos, entonces es necesario escribir una gran cantidad de elementos de configuración en i18n.config.ts, lo cual es bastante problemático.
Por supuesto, si el contenido del artículo proviene de la base de datos de back-end, entonces no es necesario considerar esto. Solo necesita almacenar el contenido traducido en la base de datos y obtener la versión del artículo en el idioma correspondiente para las páginas de diferentes idiomas.
Lo que se dice aquí es que el contenido del artículo no está en la base de datos del back-end, sino en el front-end.
Para Nuxt, la mejor manera es utilizar contenido de Nuxt. En pocas palabras, todos los artículos se almacenan en archivos de rebajas y luego, cuando se abre una determinada ruta, se cargarán la página y el archivo de rebajas correspondientes a esta ruta.
Porque una misma página, como por ejemplo la página de inicio, utiliza diferentes rutas en diferentes idiomas.
Por ejemplo, el valor predeterminado es el inglés. La página de inicio es www.xxx.com y la versión en español es www.xxx.com/es.
Entonces www.xxx.com llamará a index.vue en el directorio de páginas y cargará index.md en el directorio de contenido. Sin embargo, www.xxx.com/es llamará a index.vue en el directorio de páginas y cargará el documento es.md en el directorio de contenido.
Por lo tanto, para versiones en diferentes idiomas del mismo artículo, solo necesita crear la versión correspondiente del archivo de traducción de acuerdo con la ruta en el directorio de contenido.
1. Instalar contenido nuxt
pnpm agregar @nuxt/content
2. configuración nuxt.config.ts
módulos: [ '@nuxt/content' ], contenido: { // ... opciones }3. Llame al documento de traducción correspondiente en la página.
La página de inicio está predeterminada en inglés y las rutas y páginas en español están configuradas.
La ruta final es así:
Página de inicio predeterminada (inglés): www.xxx.com
Página de inicio en español: www.xxx.com/es
Primero, diseñe el directorio de archivos de contenido.
//diseño del directorio de contenido | index.vue content.md.
Luego, agregue etiquetas a la parte de la página de inicio donde se debe llamar el artículo.
<ContentDoc />3. Mejores prácticas para el enrutamiento internacional
en-US, en significa inglés, US significa país: Estados Unidos. Este es un código de idioma estándar. La ruta se puede escribir directamente así: www.xxx.com/en-US
Sin embargo, la mayoría de las veces, no necesitamos desglosarlo a nivel de país, sólo el nivel de idioma es suficiente. Por lo tanto, lo más apropiado es escribirlo así: www.xxx.com/es
Por supuesto, este no puede ser el caso del chino, que incluye: zh-CN (chino simplificado), zh-HK (tradicional de Hong Kong), zh-TW (tradicional de Taiwán).
Entonces, para los chinos, esta es la única manera: www.xxx.com/zh-cn
4. Apéndice: Códigos de idiomas estándar internacionales
| Código de lenguaje | país de idioma |
|---|---|
| af | africaans |
| af-ZA | africaans |
| Arkansas | Arábica |
| ar-AE | Árabe (EAU) |
| ar-BH | Árabe (Bahrein) |
| ar-DZ | Árabe (Argelia) |
| ar-EG | Árabe (Egipto) |
| ar-IQ | Árabe (Irak) |
| ar-JO | Árabe (Jordania) |
| ar-KW | Árabe (Kuwait) |
| ar-LB | Árabe (Líbano) |
| ar-LY | Árabe (Libia) |
| ar-MA | Árabe (Marruecos) |
| ar-OM | Árabe (Omán) |
| ar-QA | Árabe (Qatar) |
| ar-SA | Árabe (Arabia Saudita) |
| ar-SY | Árabe (Siria) |
| ar-TN | Árabe (Túnez) |
| ar-YE | Árabe (Yemen) |
| Arizona | azerbaiyano |
| az-AZ | Azerbaiyano (latín) |
| az-AZ | Azerbaiyano (cirílico) |
| ser | Belga |
| ser-POR | Belga |
| bg | búlgaro |
| bg-BG | búlgaro |
| bs-BA | Bosnio (latín, Bosnia y Herzegovina) |
| California | catalán |
| ca-ES | catalán |
| cs | checo |
| cs-CZ | checo |
| cy | galés |
| cy-GB | galés |
| da | danés |
| da-DK | danés |
| Delaware | Alemán |
| de-AT | Alemán (Austria) |
| de-CH | Alemán (Suiza) |
| de-DE | Alemán Alemania) |
| fiambres | Alemán (Liechtenstein) |
| de-LU | Alemán (Luxemburgo) |
| dv | Tiwiese |
| dv-MV | Tiwiese |
| el | Griego |
| el-GR | Griego |
| es | Inglés |
| es-AU | Inglés (Australia) |
| es-BZ | Inglés (Belice) |
| es-CA | Inglés (Canadá) |
| es-CB | Inglés (Caribe) |
| es-ES | Inglés del Reino Unido) |
| es-IE | Inglés (Irlanda) |
| es-JM | Inglés (jamaiquino) |
| es-NZ | Inglés (Nueva Zelanda) |
| es-PH | Inglés (Filipinas) |
| es-TT | Inglés (Trinidad) |
| es-US | Inglés Estados Unidos) |
| es-ZA | Inglés (Sudáfrica) |
| es-ZW | Inglés (Zimbabue) |
| eo | esperanto |
| es | español |
| es-AR | Español (Argentina) |
| es-BO | Español (Bolivia) |
| es-CL | español (chile) |
| es-CO | Español (Colombia) |
| es-CR | Español (Costa Rica) |
| es-DO | Español (República Dominicana) |
| es-CE | Español (Ecuador) |
| es-ES | Español (Tradicional) |
| es-ES | Español (Internacional) |
| es-GT | Español (Guatemala) |
| es-HN | Español (Honduras) |
| es-MX | Español (México) |
| es-NI | Español(Nicaragua) |
| es-PA | Español (Panamá) |
| es-PE | Español (Perú) |
| es-PR | Español (Puerto Rico (EE. UU.)) |
| divisar | Español (Paraguay) |
| es-SV | Español(El Salvador) |
| es-UY | Español (Uruguay) |
| es-VE | Español (Venezuela) |
| y | estonio |
| et-EE | estonio |
| UE | vasco |
| es EU | vasco |
| fa | Francés |
| abeto | Francés |
| fi | finlandés |
| fi-FI | finlandés |
| para | feroés |
| fo-FO | feroés |
| fr | Francés |
| fr-BE | Francés (Bélgica) |
| fr-CA | Francés (Canadá) |
| fr-CH | Francés (Suiza) |
| fr-FR | Francés Francia) |
| fr-LU | Francés (Luxemburgo) |
| fr-MC | Francés (Mónaco) |
| gl | gallego |
| gl-ES | gallego |
| Gu | gujarati |
| gu-IN | gujarati |
| él | hebreo |
| él-IL | hebreo |
| Hola | hindi |
| hola-EN | hindi |
| hora | croata |
| hr-BA | Croata (Bosnia y Herzegovina) |
| hr-FC | croata |
| eh | húngaro |
| hu-hu | húngaro |
| hola | armenio |
| hy-AM | armenio |
| IDENTIFICACIÓN | indonesio |
| hice | indonesio |
| es | islandés |
| es-ES | islandés |
| él | italiano |
| picar | Italiano (Suiza) |
| eso eso | Italiano (Italia) |
| ja | japonés |
| ja-JP | japonés |
| ká | georgiano |
| ka-GE | georgiano |
| kk | kazajo |
| kk-KZ | kazajo |
| kn | cañara |
| kn-EN | cañara |
| ko | lenguaje Koreano |
| ko-KR | lenguaje Koreano |
| kok | Konkani |
| kok-IN | Konkani |
| Kentucky | Kirguistán |
| ky-KG | Kirguís (cirílico) |
| es | lituano |
| lt-LT | lituano |
| lv | letón |
| lv-LV | letón |
| mi | maorí |
| mi-NZ | maorí |
| mk | macedónio |
| mk-MK | Macedonia (ARYM) |
| Minnesota | mongol |
| mn-MN | mongol (cirílico) |
| señor | marathi |
| señor-IN | marathi |
| EM | malayo |
| ms-BN | Malayo (Brunei Darussalam) |
| ms-MI | malayo (malasia) |
| monte | maltés |
| mt-MT | maltés |
| nótese bien | Noruego (Berkemeier) |
| nb-NO | Noruego (Berkemeier) (Noruega) |
| nl | Holandés |
| nl-BE | Holandés (Bélgica) |
| nl-NL | Holandés (Países Bajos) |
| n-NO | Noruego (Nynosk) (Noruega) |
| ns | Sotho del Norte |
| n-ZA | Sotho del Norte |
| Pensilvania | punjabi |
| dolor | punjabi |
| sustantivo, masculino, plural— | Polaco |
| pl-PL | Polaco |
| pt | portugués |
| pt-BR | Portugués (Brasil) |
| pt-PT | Portugués (Portugal) |
| que | quechua |
| qu-BO | Quechua (Bolivia) |
| qu-CE | Quechua (Ecuador) |
| qu-PE | Quechua (Perú) |
| ro | rumano |
| ro-RO | rumano |
| ru | ruso |
| ru-RU | ruso |
| sa | Sanskrit |
| sa-IN | Sanskrit |
| sí | Sámos del Norte |
| se-FI | Samoa del Norte (Finlandia) |
| se-FI | Scott Samos (Finlandia) |
| se-FI | Inari Samos (Finlandia) |
| se-NO | Samoa del Norte (Noruega) |
| se-NO | Luleå Samos (Noruega) |
| se-NO | Samos del Sur (Noruega) |
| se-SE | Samia del Norte (Suecia) |
| se-SE | Luleå Samos (Suecia) |
| se-SE | Samos del Sur (Suecia) |
| sk | eslovaco |
| sk-SK | eslovaco |
| SL | esloveno |
| sl-SI | esloveno |
| cuadrado | albanés |
| AL cuadrado | albanés |
| sr-BA | Serbio (latín, Bosnia y Herzegovina) |
| sr-BA | Serbio (cirílico, Bosnia y Herzegovina) |
| sr-SP | Serbia (latín) |
| sr-SP | Serbia (cirílico) |
| sv | sueco |
| sv-FI | Sueco (Finlandia) |
| sv-SE | sueco |
| sudoeste | swahili |
| sw-KE | swahili |
| señor | siríaco |
| syr-SY | siríaco |
| ejército de reserva | tamil |
| ta-IN | tamil |
| te | telugu |
| te-IN | telugu |
| th | tailandés |
| th-TH | tailandés |
| tl | tagalo |
| tl-PH | Tagalo (Filipinas) |
| Tennesse | tswana |
| tn-ZA | tswana |
| tr | turco |
| tr-TR | turco |
| ts | Dzonga |
| TT | tártaro |
| tt-RU | tártaro |
| Reino Unido | ucranio |
| Reino Unido-UA | ucranio |
| tu | urdu |
| ur-PK | urdu |
| uz | uzbeko |
| uz-UZ | Uzbeko (latín) |
| uz-UZ | Uzbeko (cirílico) |
| vi | vietnamita |
| vi-VN | vietnamita |
| xh | lengua bantú |
| xh-ZA | lengua bantú |
| Z h | Chino |
| zh-CN | Chino simplificado) |
| zh-HK | Chino (Hong Kong) |
| zh-MO | Chino (Macao) |
| zh-SG | Chino (Singapur) |
| zh-TW | chino tradicional) |
| zu | zulú |
| zu-ZA | zulú |
Enlace
https://github.com/aigc-projects/nuxt-i18n-starter
