Acceso

La solución de internacionalización definitiva de Nuxt: I18n+Nuxt Content

Autor:neo yang Tiempo:2023/12/06 Leer: 7457
Con la ola de viajes al extranjero, Vue y Nuxt, que se utilizan ampliamente en China, a menudo enfrentan problemas de internacionalización. Si es wordpress es sencillo, instala […]

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-dev

3. 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 plantilla

2. 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 lenguajepaís de idioma
afafricaans
af-ZAafricaans
ArkansasArá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)
Arizonaazerbaiyano
az-AZAzerbaiyano (latín)
az-AZAzerbaiyano (cirílico)
serBelga
ser-PORBelga
bgbúlgaro
bg-BGbúlgaro
bs-BABosnio (latín, Bosnia y Herzegovina)
Californiacatalán
ca-EScatalán
cscheco
cs-CZcheco
cygalés
cy-GBgalés
dadanés
da-DKdanés
DelawareAlemán
de-ATAlemán (Austria)
de-CHAlemán (Suiza)
de-DEAlemán Alemania)
fiambresAlemán (Liechtenstein)
de-LUAlemán (Luxemburgo)
dvTiwiese
dv-MVTiwiese
elGriego
el-GRGriego
esInglés
es-AUInglés (Australia)
es-BZInglés (Belice)
es-CAInglés (Canadá)
es-CBInglés (Caribe)
es-ESInglés del Reino Unido)
es-IEInglés (Irlanda)
es-JMInglés (jamaiquino)
es-NZInglés (Nueva Zelanda)
es-PHInglés (Filipinas)
es-TTInglés (Trinidad)
es-USInglés Estados Unidos)
es-ZAInglés (Sudáfrica)
es-ZWInglés (Zimbabue)
eoesperanto
esespañol
es-AREspañol (Argentina)
es-BOEspañol (Bolivia)
es-CLespañol (chile)
es-COEspañol (Colombia)
es-CREspañol (Costa Rica)
es-DOEspañol (República Dominicana)
es-CEEspañol (Ecuador)
es-ESEspañol (Tradicional)
es-ESEspañol (Internacional)
es-GTEspañol (Guatemala)
es-HNEspañol (Honduras)
es-MXEspañol (México)
es-NIEspañol(Nicaragua)
es-PAEspañol (Panamá)
es-PEEspañol (Perú)
es-PREspañol (Puerto Rico (EE. UU.))
divisarEspañol (Paraguay)
es-SVEspañol(El Salvador)
es-UYEspañol (Uruguay)
es-VEEspañol (Venezuela)
yestonio
et-EEestonio
UEvasco
es EUvasco
faFrancés
abetoFrancés
fifinlandés
fi-FIfinlandés
paraferoés
fo-FOferoés
frFrancés
fr-BEFrancés (Bélgica)
fr-CAFrancés (Canadá)
fr-CHFrancés (Suiza)
fr-FRFrancés Francia)
fr-LUFrancés (Luxemburgo)
fr-MCFrancés (Mónaco)
glgallego
gl-ESgallego
Gugujarati
gu-INgujarati
élhebreo
él-ILhebreo
Holahindi
hola-ENhindi
horacroata
hr-BACroata (Bosnia y Herzegovina)
hr-FCcroata
ehhúngaro
hu-huhúngaro
holaarmenio
hy-AMarmenio
IDENTIFICACIÓNindonesio
hiceindonesio
esislandés
es-ESislandés
élitaliano
picarItaliano (Suiza)
eso esoItaliano (Italia)
jajaponés
ja-JPjaponés
georgiano
ka-GEgeorgiano
kkkazajo
kk-KZkazajo
kncañara
kn-ENcañara
kolenguaje Koreano
ko-KRlenguaje Koreano
kokKonkani
kok-INKonkani
KentuckyKirguistán
ky-KGKirguís (cirílico)
eslituano
lt-LTlituano
lvletón
lv-LVletón
mimaorí
mi-NZmaorí
mkmacedónio
mk-MKMacedonia (ARYM)
Minnesotamongol
mn-MNmongol (cirílico)
señormarathi
señor-INmarathi
EMmalayo
ms-BNMalayo (Brunei Darussalam)
ms-MImalayo (malasia)
montemaltés
mt-MTmaltés
nótese bienNoruego (Berkemeier)
nb-NONoruego (Berkemeier) (Noruega)
nlHolandés
nl-BEHolandés (Bélgica)
nl-NLHolandés (Países Bajos)
n-NONoruego (Nynosk) (Noruega)
nsSotho del Norte
n-ZASotho del Norte
Pensilvaniapunjabi
dolorpunjabi
sustantivo, masculino, plural—Polaco
pl-PLPolaco
ptportugués
pt-BRPortugués (Brasil)
pt-PTPortugués (Portugal)
quequechua
qu-BOQuechua (Bolivia)
qu-CEQuechua (Ecuador)
qu-PEQuechua (Perú)
rorumano
ro-ROrumano
ruruso
ru-RUruso
saSanskrit
sa-INSanskrit
Sámos del Norte
se-FISamoa del Norte (Finlandia)
se-FIScott Samos (Finlandia)
se-FIInari Samos (Finlandia)
se-NOSamoa del Norte (Noruega)
se-NOLuleå Samos (Noruega)
se-NOSamos del Sur (Noruega)
se-SESamia del Norte (Suecia)
se-SELuleå Samos (Suecia)
se-SESamos del Sur (Suecia)
skeslovaco
sk-SKeslovaco
SLesloveno
sl-SIesloveno
cuadradoalbanés
AL cuadradoalbanés
sr-BASerbio (latín, Bosnia y Herzegovina)
sr-BASerbio (cirílico, Bosnia y Herzegovina)
sr-SPSerbia (latín)
sr-SPSerbia (cirílico)
svsueco
sv-FISueco (Finlandia)
sv-SEsueco
sudoesteswahili
sw-KEswahili
señorsiríaco
syr-SYsiríaco
ejército de reservatamil
ta-INtamil
tetelugu
te-INtelugu
thtailandés
th-THtailandés
tltagalo
tl-PHTagalo (Filipinas)
Tennessetswana
tn-ZAtswana
trturco
tr-TRturco
tsDzonga
TTtártaro
tt-RUtártaro
Reino Unidoucranio
Reino Unido-UAucranio
tuurdu
ur-PKurdu
uzuzbeko
uz-UZUzbeko (latín)
uz-UZUzbeko (cirílico)
vivietnamita
vi-VNvietnamita
xhlengua bantú
xh-ZAlengua bantú
Z hChino
zh-CNChino simplificado)
zh-HKChino (Hong Kong)
zh-MOChino (Macao)
zh-SGChino (Singapur)
zh-TWchino tradicional)
zuzulú
zu-ZAzulú

Enlace

https://github.com/aigc-projects/nuxt-i18n-starter



copyright © www.lyustu.com todos los derechos reservados.
Tema: TheMoon V3.0 Autor:neo yang