Internationalisation dans Vue.js

Quelles sont les meilleures pratiques d'internationalisation dans Vue?

Actuellement, je pense avoir un objet 'strings' qui contient toutes les chaînes, puis un peu de magie ajax pour mettre à jour cet objet strings basé sur un fichier json avec des chaînes traduites dans certaines langues.

Quelqu'un a de meilleures idées? J'ai actuellement un peu de mal à utiliser mon approche strings puisque l'objet strings doit être chargé avant toute autre chose.

Existe-t-il une fonctionnalité d'espace réservé pour les chaînes en Vue? Par exemple, j'ai un menu dont les entrées résident dans les données de ma machine virtuelle. Existe-t-il un moyen de définir cela sur une chaîne statique, puis de le lier automatiquement à une autre chaîne une fois qu'il existe?

22
demandé sur Simon Hyll 2017-04-30 00:17:41

3 réponses

Le pluginvue-i18n est plutôt bon. Ils ont documentation qui suit la norme définie par la documentation Vue. Le paquet est maintenu à jour aussi bien. Je commencerais par là.

Une chose que j'aime est leur support pour composants de fichiers uniques . Vous pouvez ajouter une balise supplémentaire au composant avec des traductions spécifiques au composant. Voici l'exemple de leur documentation:

<i18n>
{
  "en": {
    "hello": "hello world!"
  },
  "ja": {
    "hello": "こんにちは、世界!"
  }
}
</i18n>
23
répondu Bert 2018-06-13 15:47:17

Vous pouvez lire cet article ...

Je recommande de regarder dans une lib i18n qui est prête à être utilisée dans différents frameworks, c'est-à-dire i18next

Il y a quelques vue libs trop: c'est à dire vue-i18next ou @panter/vue-i18next

En outre, vous ne devriez pas seulement considérer que vous devez Instrumenter votre code (i18n) pour obtenir votre application/site Web traduit. Vous devriez penser au processus aussi-comment allez-vous résoudre localisation continue , comment vous gardez une trace des progrès, etc...

Pour un système de gestion de traduction+, vous pouvez par exemple. jetez un oeil à locize Il fonctionne bien avec tous les frameworks i18n basés sur json... et fournit beaucoup plus que les systèmes traditionnels.

10
répondu adrai 2017-05-06 12:28:55

Une autre possibilité est vuex-i18n , Si vous voulez utiliser le magasin Vuex. Il définit une méthode et un filtre:

{{ 'Item' | translate }}
{{ $t('You have {count} new messages', {count: 5}) }}
8
répondu rakensi 2018-03-13 19:30:47