Sous-ensemble de taille réduite de Vue I18n

petite-vue-i18n est une distribution alternative de Vue I18n, qui ne fournit que les fonctionnalités minimales.

Quelle est la différence avec Vue I18n ?

La taille est plus petite que vue-i18n
- CDN ou sans bundler
  - Réduction de la taille du package : runtime + compiler ~32%, runtime seul ~45%
  - petite-vue-i18n : runtime + compiler ~9.61KB, runtime seul ~5.51KB (build de production, compression brotli)
  - vue-i18n : runtime + compiler ~14.18KB, runtime seul ~10.12KB (build de production, compression brotli)
- ES Modules pour le navigateur
  - Réduction de la taille du package : runtime + compiler ~32%, runtime seul ~45%
  - petite-vue-i18n : runtime + compiler ~10.51KB, runtime seul ~6.20KB (build de production, compression brotli)
  - vue-i18n : runtime + compiler ~15.40KB, runtime seul ~11.12KB (build de production, compression brotli)
- Taille du bundle de l'application
  - Réduction de taille par rapport à vue-i18n : ~10% (mesure de la taille du code de vue-i18n et petite-vue-i18n)
L'ancienne API n'est pas prise en charge, seule la Composition API
Les API pour les formats de date et heure, les formats numériques et les utilitaires ne sont pas incluses. Traduction uniquement
- n, $n
- d, $d
- rt, $rt
- tm, $tm
- getDateTimeFormat, setDateTimeFormat, mergeDateTimeFormat
- getNumberFormat, setNumberFormat, mergeNumberFormat
Les seuls messages locaux qui peuvent être gérés sont des paires clé-valeur simples. Si vous voulez gérer des messages locaux hiérarchiques, vous devez les personnaliser en utilisant l'API
L'algorithme de récupération locale est l'ordre du tableau spécifié dans fallbackLocale
La directive personnalisée v-t n'est pas incluse
Les composants suivants fournis par vue-i18n ne sont pas inclus
- Traduction i18n-t
- Format de date et heure i18n-d
- Format numérique i18n-n

Cas d'utilisation de `petite-vue-i18n`

vue-i18n inclut diverses fonctionnalités i18n telles que la traduction, le format de dates et heures et les formats numériques. Certains projets peuvent seulement utiliser la traduction et non les formats de date et heure. Pour l'instant, même dans ce cas, le code pour cette fonctionnalité est inclus.

Si votre projet utilise uniquement l'API t ou $t pour la traduction, nous vous recommandons d'utiliser petite-vue-i18n plutôt que vue-i18n. Et si votre projet a besoin des fonctionnalités de vue-i18n, vous pouvez migrer facilement de petite-vue-i18n vers vue-i18n. Cela signifie qu'il s'agit d'une amélioration progressive.

Installation

Généralement, c'est la même chose que l'installation de vue-i18n. La seule différence est que la partie de l'URL ou la partie du chemin est changée de vue-i18n vers petite-vue-i18n.

CDN

Vous devez insérer les scripts suivants à la fin de <head> :

html

<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/petite-vue-i18n"></script>

Voici le code de l'application avec la balise script :

html

<script>
const { createApp } = Vue
const { createI18n } = PetiteVueI18n

const i18n = createI18n({
  // options vue-i18n ici...
})

const app = createApp({
  // options vue ici...
})

app.use(i18n)
app.mount('#app')
</script>

Gestionnaires de paquets

npmyarnpnpm

npm install petite-vue-i18n@next --save

yarn add petite-vue-i18n@next

pnpm add petite-vue-i18n@next

import { createApp } from 'vue'
import { createI18n } from 'petite-vue-i18n'

const i18n = createI18n({
  // options vue-i18n ici...
})

const app = createApp({
  // options vue ici...
})

app.use(i18n)
app.mount('#app')

Utilisations

Bonjour le monde

Modèle :

html

<div id="app">
  <h1>{{ t('hello world') }}</h1>
</div>

Scripts :

const { createApp } = Vue
const { createI18n, useI18n } = PetiteVueI18n
// ou pour les modules ES
// import { createApp } from 'vue'
// import { createI18n } from 'petite-vue-i18n'

const i18n = createI18n({
  locale: 'en',
  messages: {
    en: {
      'hello world': 'Hello world!'
    },
    ja: {
      'hello world': 'こんにちは、世界！'
    }
  }
})

// définir le composant App
const App = {
  setup() {
    const { t } = useI18n()
    return { t }
  }
}

const app = createApp(App)

app.use(i18n)
app.mount('#app')

Utiliser le même résolveur de messages et le même récupérateur de locale que `vue-i18n`

Dans petite-vue-i18n, le résolveur de messages et le récupérateur de locale utilisent des implémentations simples afin d'optimiser la taille du code, comme décrit dans la section des différences, comme ci-dessous :

Résolveur de messages
- Résout les messages locaux au format clé-valeur
- À propos de l'implémentation, voir ici
Récupérateur de locale
- Récupère selon l'ordre du tableau spécifié dans fallbackLocale
- Si un simple texte de locale est spécifié, récupère vers cette locale
- À propos de l'implémentation, voir ici

Si vous voulez utiliser le même résolveur de messages et le même récupérateur de locale que vue-i18n, vous pouvez les changer en utilisant l'API.

Notez que pour le moment, seuls les outils de build comme vite et webpack sont supportés.

Vous devez installer @intlify/core-base dans votre projet avec le gestionnaire de paquets.

npmyarnpnpm

npm install --save @intlify/core-base@next

yarn add @intlify/core-base@next

pnpm add @intlify/core-base@next

Ensuite, au point d'entrée de l'application, configurez le résolveur de messages et le récupérateur de locale en utilisant l'API comme ci-dessous :

import { createApp } from 'vue'
import {
  createI18n,
  registerMessageResolver, // enregistrer l'API du résolveur de messages
  registerLocaleFallbacker, // enregistrer l'API du récupérateur de locale
} from 'petite-vue-i18n'
import {
  resolveValue, // résolveur de messages de vue-i18n utilisé par défaut
  fallbackWithLocaleChain // récupérateur de locale de vue-i18n utilisé par défaut
} from '@intlify/core-base'

// enregistrer le résolveur de messages de vue-i18n
registerMessageResolver(resolveValue)

// enregistrer le récupérateur de locale de vue-i18n
registerLocaleFallbacker(fallbackWithLocaleChain)

// code quelque chose...
// ...

Avec ces paramètres, la résolution des messages locaux et le récupérateur de locale seront gérés de la même manière qu'à partir de vue-i18n, notez que la taille du code augmentera légèrement.

Configuration du plugin de bundler

Si vous construisez votre application avec un outil de build comme vite, vous devez le configurer. Veuillez définir l'option 'module' dans @intlify/unplugin-vue-i18n comme suit.

NOTE

À propos de la configuration de @intlify/unplugin-vue-i18n, voir la section 'performance' et les docs de @intlify/unplugin-vue-i18n

IMPORTANT

La version de @intlify/unplugin-vue-i18n doit être 5.1.0 et ultérieure

diff

 // vite.config.ts
 import { defineConfig } from 'vite'
 import { resolve, dirname } from 'node:path'
 import { fileURLToPath } from 'url'
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'

 export default defineConfig({
   /* ... */
   plugins: [
     /* ... */
     VueI18nPlugin({
       /* options */
 +      module: 'petite-vue-i18n',
       // option de pré-compilation des ressources de messages locaux
       include: resolve(dirname(fileURLToPath(import.meta.url)), './path/to/src/locales/**'),
     }),
   ],
 })

Basculer sans modifier l'ID d'importation

Vous pouvez basculer de vue-i18n vers petite-vue-i18n dans votre application en utilisant un alias npm sans modifier l'ID d'importation.

package.json :

diff

 {
   // ...
   "dependencies": {
     "vue": "^3.4.14",
 -    "vue-i18n": "^10.0.0"
 +    "vue-i18n": "npm:petite-vue-i18n@^10.0.0"
   },
 }

Vous avez besoin de @intlify/unplugin-vue-i18n pour builder votre application.

general

Variables

Functions

Interfaces

Type Aliases

vue

Interfaces

Sous-ensemble de taille réduite de Vue I18n

Quelle est la différence avec Vue I18n ?

Cas d'utilisation de `petite-vue-i18n`

Installation

CDN

Gestionnaires de paquets

Utilisations

Bonjour le monde

Utiliser le même résolveur de messages et le même récupérateur de locale que `vue-i18n`

Configuration du plugin de bundler

Basculer sans modifier l'ID d'importation

Sous-ensemble de taille réduite de Vue I18n ​

Quelle est la différence avec Vue I18n ? ​

Cas d'utilisation de petite-vue-i18n ​

Installation ​

CDN ​

Gestionnaires de paquets ​

Utilisations ​

Bonjour le monde ​

Utiliser le même résolveur de messages et le même récupérateur de locale que vue-i18n ​

Configuration du plugin de bundler ​

Basculer sans modifier l'ID d'importation ​

Sous-ensemble de taille réduite de Vue I18n

Quelle est la différence avec Vue I18n ?

Cas d'utilisation de `petite-vue-i18n`

Installation

CDN

Gestionnaires de paquets

Utilisations

Bonjour le monde

Utiliser le même résolveur de messages et le même récupérateur de locale que `vue-i18n`

Configuration du plugin de bundler

Basculer sans modifier l'ID d'importation