La solution d'internationalisation ultime de Nuxt : I18n+Nuxt Content
Avec la tendance à l'étranger, Vue et Nuxt, qui sont largement utilisés en Chine, sont souvent confrontés à des problèmes d'internationalisation.
Si c'est WordPress, c'est simple : installez un plug-in, configurez l'interface de traduction de Google, et le système traduira automatiquement chaque jour le nouveau contenu dans différentes versions linguistiques.
Mais pour d'autres systèmes, ce n'est pas si pratique.
Le code est open source : https://github.com/aigc-projects/nuxt-i18n-starter
1. Internationalisation de base-I18n
nuxt-i18n
1. Qu'est-ce que l'I18n ?
I18n est un incontournable pour l’internationalisation de Nuxt. Il fournit principalement un ensemble complet de solutions d'internationalisation, y compris le routage d'internationalisation et les méthodes de changement de langue basées sur le routage d'internationalisation.
2. Installez I18n
Tous les éléments suivants conviennent.
fil ajouter @nuxtjs/i18n # fil npm je @nuxtjs/i18n # npm pnpm je @nuxtjs/i18n pnpm ajouter @nuxtjs/i18n@next --save-dev3. Configurez nuxt.config.ts
modules : [ '@nuxtjs/i18n', ], i18n : { locales : [ { nom : "English", code : "en", iso : "en-US", dir : "ltr" }, { nom : " español",code: "es", iso: "es-LA", dir: "ltr" }, { nom: "En français",code: "fr", iso: "fr-FR", dir: "ltr " }, { name : "العربية", code : "ar", iso : "ar-EG", dir : "rtl" },], defaultLocale : "en", detectBrowserLanguage : false, // 👇 Référencez la Vue I18n fichier de configuration vueI18n : "./i18n.config.js", }, 4. Configurez i18n.config.ts
Créez un nouveau i18n.config.ts ou i18n.config.js
Ce fichier est utilisé pour configurer les champs de traduction.
export default definitionI18nConfig(() => ({ legs: false, // 👇 Ajouter des messages de traduction : { "en": { nav_about: "About", }, "es": { nav_about: "sobre", }, "ar " : { nav_about : "نبذة عنا", }, "fr": { nav_about : "À propos", }, }, }))
5. Lier les composants
code
usage
{{ $t('nav_home') }}
6. Composant de changement de langue
code
<!-- 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">
{{ nom du lieu }}
</option>
</select>
</div>
</template>
usage
Utiliser des balises sur une page ou une mise en page :
7. Obtenez la langue actuelle
context.app.i18n.locale // où vous avez accès à NuxtContext this.$i18n.locale // dans le composant $i18n.locale // dans le modèle2. Internationalisation du contenu du document
L'utilisation d'I18n seule peut réaliser complètement l'internationalisation de l'ensemble du site. Mais si le site Web contient de nombreux articles, un grand nombre d'éléments de configuration doivent être écrits dans i18n.config.ts, ce qui est assez gênant.
Bien entendu, si le contenu de l'article provient de la base de données principale, il n'est pas nécessaire d'en tenir compte : il vous suffit de stocker le contenu traduit dans la base de données et d'obtenir la version de l'article dans la langue correspondante pour les pages de différentes langues.
Ce qui est dit ici, c'est que le contenu de l'article ne se trouve pas dans la base de données back-end, mais sur le front-end.
Pour nuxt, le meilleur moyen est d’utiliser le contenu nuxt. En termes simples, tous les articles sont stockés dans des fichiers de démarque, puis, lorsqu'un certain itinéraire est ouvert, la page et le fichier de démarque correspondant à cet itinéraire seront chargés.
Parce qu'une même page, comme la page d'accueil, utilise des itinéraires différents dans différentes langues.
Par exemple, la valeur par défaut est l'anglais. La page d'accueil est www.xxx.com et la version espagnole est www.xxx.com/es.
Ainsi, www.xxx.com appellera index.vue dans le répertoire des pages et chargera index.md dans le répertoire de contenu. Cependant, www.xxx.com/es appellera index.vue dans le répertoire pages et chargera le document es.md dans le répertoire content.
Par conséquent, pour différentes versions linguistiques du même article, il vous suffit de créer la version correspondante du fichier de traduction en fonction de l'itinéraire dans le répertoire de contenu.
1. Installez le contenu nuxt
pnpm ajouter @nuxt/content
2. Configuration nuxt.config.ts
modules : [ '@nuxt/content' ], contenu : { // ... options }3. Appelez le document de traduction correspondant sur la page
La page d'accueil est par défaut en anglais et les itinéraires et pages en espagnol sont configurés.
Le parcours final est le suivant :
Page d'accueil par défaut (anglais) : www.xxx.com
Page d'accueil espagnole : www.xxx.com/es
Tout d'abord, concevez le répertoire du fichier de contenu
//conception du répertoire de contenu | pages . index.vue contenu . index.md . es.md
Ensuite, ajoutez des balises à la partie de la page d'accueil où l'article doit être appelé
<ContentDoc />3. Bonnes pratiques pour le routage international
en-US, en signifie anglais, US signifie pays : États-Unis. Il s'agit d'un code de langue standard. L'itinéraire peut être écrit directement comme ceci : www.xxx.com/en-US
Cependant, la plupart du temps, nous n’avons pas besoin de ventiler le niveau au niveau national, seul le niveau linguistique suffit. Il est donc plus approprié de l'écrire ainsi : www.xxx.com/fr
Bien sûr, cela ne peut pas être le cas pour le chinois. Le chinois comprend : zh-CN (chinois simplifié), zh-HK (Hong Kong traditionnel), zh-TW (Taiwan traditionnel).
Donc, pour les chinois, c'est le seul moyen : www.xxx.com/zh-cn
4. Annexe : Codes linguistiques normalisés internationaux
| code de langue | pays de langue |
|---|---|
| un F | afrikaans |
| af-ZA | afrikaans |
| ar | arabe |
| ar-AE | Arabe (EAU) |
| ar-BH | Arabe (Bahreïn) |
| ar-DZ | Arabe (Algérie) |
| ar-EG | Arabe (Egypte) |
| ar-IQ | Arabe (Irak) |
| ar-JO | Arabe (Jordanie) |
| ar-KW | Arabe (Koweït) |
| ar-LB | Arabe (Liban) |
| ar-LY | Arabe (Libye) |
| ar-MA | Arabe (Maroc) |
| ar-OM | Arabe (Oman) |
| ar-QA | Arabe (Qatar) |
| ar-SA | Arabe (Arabie Saoudite) |
| ar-SY | Arabe (Syrie) |
| ar-TN | Arabe (Tunisie) |
| ar-YE | Arabe (Yémen) |
| az | azerbaïdjanais |
| az-AZ | azerbaïdjanais (latin) |
| az-AZ | azerbaïdjanais (cyrillique) |
| être | Belge |
| être-PAR | Belge |
| bg | bulgare |
| bg-BG | bulgare |
| bs-BA | bosniaque (latin, Bosnie-Herzégovine) |
| Californie | catalan |
| ca-ES | catalan |
| cs | tchèque |
| cs-CZ | tchèque |
| cy | gallois |
| cy-GB | gallois |
| papa | danois |
| da-DK | danois |
| de | Allemand |
| de-AT | Allemand (Autriche) |
| de-CH | Allemand (Suisse) |
| de-DE | Allemand Allemagne) |
| épicerie fine | Allemand (Liechtenstein) |
| de-LU | Allemand (Luxembourg) |
| dv | Tiwiese |
| dv-MV | Tiwiese |
| el | grec |
| el-GR | grec |
| fr | Anglais |
| fr-AU | Anglais (Australie) |
| fr-BZ | Anglais (Belize) |
| fr-CA | Anglais (Canada) |
| fr-CB | Anglais (Caraïbes) |
| fr-FR | Anglais Royaume-Uni) |
| fr-IE | Anglais (Irlande) |
| fr-JM | Anglais (jamaïcain) |
| fr-NZ | Anglais (Nouvelle-Zélande) |
| fr-PH | Anglais (Philippines) |
| fr-TT | Anglais (Trinité) |
| fr-US | États Unis Anglais) |
| fr-ZA | Anglais (Afrique du Sud) |
| fr-ZW | Anglais (Zimbabwe) |
| eo | espéranto |
| es | Espagnol |
| es-AR | Espagnol (Argentine) |
| es-BO | Espagnol (Bolivie) |
| es-CL | Espagnol (Chili) |
| es-CO | Espagnol (Colombie) |
| es-CR | Espagnol (Costa Rica) |
| es-DO | Espagnol (République Dominicaine) |
| es-EC | Espagnol (Équateur) |
| es-ES | Espagnol (traditionnel) |
| es-ES | Espagnol (international) |
| es-GT | Espagnol (Guatemala) |
| es-HN | Espagnol (Honduras) |
| es-MX | Espagnol (Mexique) |
| es-NI | Espagnol (Nicaragua) |
| es-PA | Espagnol (Panama) |
| es-PE | Espagnol (Pérou) |
| es-PR | Espagnol (Porto Rico (États-Unis)) |
| es-PY | Espagnol (Paraguay) |
| es-SV | Espagnol (El Salvador) |
| es-UY | Espagnol (Uruguay) |
| es-VE | Espagnol (Venezuela) |
| et | estonien |
| et-EE | estonien |
| UE | Basque |
| eu-ES | Basque |
| FA | Français |
| sapin | Français |
| Fi | finlandais |
| fi-FI | finlandais |
| pour | féroïen |
| fo-FO | féroïen |
| fr | Français |
| fr-BE | Français (Belgique) |
| fr-CA | Français (Canada) |
| fr-CH | Français (Suisse) |
| F RFR | France francaise) |
| fr-LU | Français (Luxembourg) |
| fr-MC | Français (Monaco) |
| gl | galicien |
| gl-ES | galicien |
| gu | gujarati |
| gu-IN | gujarati |
| il | hébreu |
| il-IL | hébreu |
| Salut | hindi |
| Salut dans | hindi |
| heure | croate |
| h-BA | Croate (Bosnie-Herzégovine) |
| rh-rh | croate |
| hein | hongrois |
| hu-HU | hongrois |
| salut | arménien |
| hy-AM | arménien |
| IDENTIFIANT | indonésien |
| je l'ai fait | indonésien |
| est | islandais |
| est-EST | islandais |
| il | italien |
| démanger | Italien (Suisse) |
| ça ça | Italien (Italie) |
| oui | Japonais |
| ja-JP | Japonais |
| ka | géorgien |
| ka-GE | géorgien |
| kk | Kazakh |
| kk-KZ | Kazakh |
| je sais | Canara |
| kn-IN | Canara |
| ko | la langue coréenne |
| ko-KR | la langue coréenne |
| kok | Konkani |
| kok-IN | Konkani |
| ky | Kirghize |
| ky-KG | Kirghize (cyrillique) |
| lt | lituanien |
| lt-LT | lituanien |
| lv | letton |
| lv-LV | letton |
| mi | Maori |
| mi-NZ | Maori |
| mk | Macédonien |
| mk-MK | Macédonien (ARYM) |
| minute | mongol |
| mn-MN | Mongol (cyrillique) |
| M. | marathi |
| monsieur-IN | marathi |
| MS | malais |
| ms-BN | Malais (Brunéi Darussalam) |
| Mme-MY | Malais (Malaisie) |
| mont | maltais |
| mt-MT | maltais |
| nb | Norvégien (Berkemeier) |
| nb-NON | Norvégien (Berkemeier) (Norvège) |
| nl | Néerlandais |
| nl-BE | Néerlandais (Belgique) |
| nl-NL | Néerlandais (Pays-Bas) |
| n-NON | Norvégien (Nynosk) (Norvège) |
| ns | Sotho du Nord |
| n-ZA | Sotho du Nord |
| Pennsylvanie | pendjabi |
| douleur | pendjabi |
| PL | polonais |
| pl-PL | polonais |
| pt | Portugais |
| pt-BR | Portugais (Brésil) |
| pt-PT | Portugais (Portugal) |
| qu | Quechua |
| qu-BO | Quechua (Bolivie) |
| qu-EC | Quechua (Équateur) |
| qu-PE | Quechua (Pérou) |
| ro | roumain |
| ro-RO | roumain |
| ru | russe |
| ru-RU | russe |
| sa | Sanskrit |
| sa-IN | Sanskrit |
| se | Samos du Nord |
| se-FI | Samoa du Nord (Finlande) |
| se-FI | Scott Samos (Finlande) |
| se-FI | Inari Samos (Finlande) |
| se-NON | Samoa du Nord (Norvège) |
| se-NON | Lulea Samos (Norvège) |
| se-NON | Samos du Sud (Norvège) |
| se-SE | Samien du Nord (Suède) |
| se-SE | Lulea Samos (Suède) |
| se-SE | Samos du Sud (Suède) |
| sk | slovaque |
| sk-SK | slovaque |
| sl | slovène |
| sl-SI | slovène |
| carré | albanais |
| carré-AL | albanais |
| sr-BA | Serbe (latin, Bosnie-Herzégovine) |
| sr-BA | Serbe (cyrillique, Bosnie-Herzégovine) |
| sr-SP | Serbie (latin) |
| sr-SP | Serbie (cyrillique) |
| sv | suédois |
| sv-FI | Suédois (Finlande) |
| sv-SE | suédois |
| sw | Swahili |
| sw-KE | Swahili |
| Syrie | syriaque |
| syr-SY | syriaque |
| ta | Tamil |
| ta-IN | Tamil |
| Te | télougou |
| te-IN | télougou |
| ème | thaïlandais |
| e-TH | thaïlandais |
| télé | Tagalog |
| tl-PH | Tagalog (Philippines) |
| tn | Tswana |
| tn-ZA | Tswana |
| tr | turc |
| tr-TR | turc |
| ts | Dzonga |
| tt | tatar |
| tt-RU | tatar |
| Royaume-Uni | ukrainien |
| Royaume-Uni-UA | ukrainien |
| ton | Ourdou |
| votre-PK | Ourdou |
| ouz | Ouzbek |
| uz-UZ | Ouzbek (latin) |
| uz-UZ | Ouzbek (cyrillique) |
| vi | vietnamien |
| vi-VN | vietnamien |
| xh | langue bantoue |
| xh-ZA | langue bantoue |
| zh | Chinois |
| zh-CN | Chinois simplifié) |
| zh-HK | Chinois (Hong Kong) |
| zh-MO | Chinois (Macao) |
| zh-SG | Chinois (Singapour) |
| zh-TW | chinois traditionnel) |
| zu | zoulou |
| zu-ZA | zoulou |
