Comment utiliser Vue pour réaliser le multilingue et l'internationalisation ?

Avec le développement de la mondialisation, le multilinguisme et l'internationalisation deviennent de plus en plus l'une des fonctions nécessaires d'un site Web ou d'une application. En tant que framework frontal populaire, Vue propose également des solutions flexibles à cet égard. Cet article expliquera comment utiliser Vue pour obtenir le multilinguisme et l'internationalisation.

1. Installez Vue-i18n

Vue-i18n est un plug-in d'internationalisation pour Vue.js qui peut nous aider à réaliser le multilingue et l'internationalisation. Vous devez d'abord installer Vue-i18n dans le projet.

npm install vue-i18n --save

2. Créer des fichiers de langue

Créez un dossier i18n dans le projet pour stocker les fichiers de langue.

Créez un fichier nommé index.js dans le dossier i18n pour configurer Vue-i18n.

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'en', // 默认使用英文
  messages: {
    en: require('./en.json'),
    zh: require('./zh.json'),
  },
});

export default i18n;

Dans le code ci-dessus, les paramètres régionaux indiquent la langue actuellement utilisée et l'anglais est utilisé par défaut. messages représente le fichier de langue utilisé, où en.json (anglais) et zh.json (chinois) sont introduits respectivement.

Vous pouvez désormais créer des fichiers en.json et zh.json dans le dossier i18n et écrire du contenu linguistique.

en.json

{
  "hello": "Hello",
  "world": "World",
  "welcome": "Welcome"
}

zh.json

{
  "hello": "你好",
  "world": "世界",
  "welcome": "欢迎"
}

3. Utiliser Vue-i18n

Utiliser Vue-i18n dans les composants est très simple, ajoutez simplement $tc (traduction) ou $t (formatage) au modèle. .

<template>
  <div>
    <p>{{ $t('hello') }}</p>
    <p>{{ $tc('world', 1) }}</p>
    <p>{{ greeting }}</p>
  </div>
</template>

<script>
import i18n from '@/i18n';

export default {
  computed: {
    greeting() {
      return this.$t('welcome', { name: 'Vue' });
    },
  },
  created() {
    // 设置语言为中文
    i18n.locale = 'zh';
  },
};
</script>

Dans le code ci-dessus, $t et $tc peuvent être utilisés pour la traduction. La différence est que $t peut être formaté et $tc peut être pluralisé en fonction des paramètres. Il démontre également l'utilisation de la méthode $t dans l'attribut calculé et la modification du langage dans le cycle de vie créé du composant.

4. Utilisez le plug-in Vue CLI

Vue CLI fournit le plug-in officiel vue-cli-plugin-i18n, qui peut rapidement intégrer le multilingue et l'internationalisation.

Vous devez d'abord installer le plug-in.

vue add i18n

Après une installation réussie, un dossier locales sera généré dans le projet pour stocker les fichiers de langue.

Modifiez le fichier src/i18n.js.

import Vue from 'vue';
import VueI18n from 'vue-i18n';

Vue.use(VueI18n);

function loadLocaleMessages() {
  const locales = require.context('@/locales', true, /[A-Za-z0-9-_,s]+.json$/i);
  const messages = {};
  locales.keys().forEach((key) => {
    const matched = key.match(/([A-Za-z0-9-_]+)./i);
    if (matched && matched.length > 1) {
      const locale = matched[1];
      messages[locale] = locales(key);
    }
  });
  return messages;
}

export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages(),
  silentFallbackWarn: true,
});

Dans le code ci-dessus, la fonction loadLocaleMessages est utilisée pour charger automatiquement les fichiers de langue dans le dossier locales et renvoyer l'objet messages. De plus, la langue par défaut et la langue de secours peuvent être définies via les variables d'environnement VUE_APP_I18N_LOCALE et VUE_APP_I18N_FALLBACK_LOCALE.

Utilisez la méthode $te dans le composant pour déterminer si la valeur clé existe et la méthode $d pour formater la date.

<template>
  <div>
    <p v-if="$te('hello')">Hello</p>
    <p>{{ $d(new Date(), 'short') }}</p>
  </div>
</template>

<script>
export default {};
</script>

Ce qui précède est la méthode de base d'utilisation de Vue pour obtenir le multilinguisme et l'internationalisation. Grâce au plug-in Vue-i18n ou au plug-in Vue CLI, vous pouvez facilement implémenter des fonctions multilingues et d'internationalisation, rendant le site Web ou l'application plus conforme à la tendance de la mondialisation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!