Comment utiliser PHP et Vue pour implémenter la fonction de commutation multilingue

Comment utiliser PHP et Vue pour implémenter la fonction de commutation multilingue

À l'ère d'Internet d'aujourd'hui, la fonctionnalité multilingue est devenue un besoin qui ne peut être ignoré. Qu'il s'agisse d'un site Web ou d'une application mobile, vous serez confronté à la nécessité de prendre en charge plusieurs langues. Cet article expliquera comment utiliser PHP et Vue pour implémenter la fonction de commutation multilingue et fournira des exemples de code spécifiques.

1. Préparation
   Tout d'abord, nous devons préparer l'environnement de développement. Assurez-vous d'avoir installé les outils de développement liés à PHP et Vue, tels que l'interpréteur PHP et Vue-cli.
2. Créer des fichiers de langue
   Créez un dossier dans le projet pour stocker les fichiers de traduction dans différentes langues. Par exemple, nous pouvons créer un dossier appelé "lang" et y créer plusieurs fichiers, chaque fichier représentant une langue. Chaque fichier stocke un contenu de traduction spécifique sous la forme de paires clé-valeur.

Par exemple, créez un fichier nommé « zh_CN.json » avec le contenu suivant :

{
  "hello": "你好",
  "welcome": "欢迎"
}

En même temps, vous pouvez également créer un fichier nommé « en_US.json » avec le contenu suivant :

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

Vous pouvez créez-en davantage si nécessaire Fichiers multilingues.

3. Créer un composant Vue
   Dans le projet Vue, créez un composant pour afficher du texte. Par exemple, nous pouvons créer un composant appelé "Translation.vue".

<template>
  <div>
    <p>{{ $t('hello') }}</p>
    <p>{{ $t('welcome') }}</p>
  </div>
</template>

<script>
export default {
  name: "Translation"
}
</script>

Dans le code ci-dessus, nous utilisons la directive $t pour obtenir le texte traduit. Il s'agit d'une directive intégrée fournie par la bibliothèque Vue-i18n. $t指令来获取翻译后的文本。这是Vue-i18n库提供的内置指令。

4. 创建语言切换功能
   在Vue项目中，我们可以使用Vue-i18n库来实现多语言切换功能。首先，我们需要安装Vue-i18n库。通过运行以下命令，将Vue-i18n库安装到项目中：

npm install vue-i18n --save

在Vue项目的入口文件中，我们需要添加如下代码：

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

Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'zh_CN', // 默认语言
  messages: {
    zh_CN: require('@/lang/zh_CN.json'), // 导入中文语言文件
    en_US: require('@/lang/en_US.json') // 导入英文语言文件
  }
});

new Vue({
  router,
  i18n,
  render: h => h(App)
}).$mount('#app');

在上面的代码中，我们首先要导入VueI18n库，并将其注册到Vue实例中。然后，通过创建一个新的VueI18n实例，我们设置了默认语言为"zh_CN"，并导入了中文和英文语言文件。

5. 完善多语言切换功能
   为了实现多语言切换功能，我们可以创建一个选择语言的下拉菜单。

在Translation.vue组件中，添加下拉菜单的代码：

<template>
  <div>
    <select v-model="$i18n.locale" @change="handleChange">
      <option value="zh_CN">中文</option>
      <option value="en_US">English</option>
    </select>
    <p>{{ $t('hello') }}</p>
    <p>{{ $t('welcome') }}</p>
  </div>
</template>

<script>
export default {
  name: "Translation",
  methods: {
    handleChange() {
      // ...
    }
  }
}
</script>

在上面的代码中，我们使用了v-model指令将下拉菜单的值绑定到了$i18n.locale，这是Vue-i18n库提供的内置属性。然后，我们在handleChange方法中可以监听到语言切换事件，根据选择的语言来切换页面的内容。

6. 完成语言切换的事件处理
   在handleChange方法中，我们需要通过重新加载页面来刷新内容，以展示选中语言的翻译结果。我们可以使用window.location.reload()
Créer une fonction de changement de langue

Dans le projet Vue, nous pouvons utiliser la bibliothèque Vue-i18n pour implémenter la fonction de changement de langue. Tout d’abord, nous devons installer la bibliothèque Vue-i18n. Installez la bibliothèque Vue-i18n dans le projet en exécutant la commande suivante :

7. handleChange() {
     window.location.reload();
   }

   
   Dans le fichier d'entrée du projet Vue, nous devons ajouter le code suivant :
rrreee

Dans le code ci-dessus, nous devons d'abord importer le Bibliothèque VueI18n et enregistrez-la auprès de l'instance Vue. Ensuite, en créant une nouvelle instance VueI18n, nous avons défini la langue par défaut sur « zh_CN » et importé les fichiers de langue chinoise et anglaise.

Améliorer la fonction de commutation multilingue

Afin de mettre en œuvre la fonction de commutation multilingue, nous pouvons créer un menu déroulant pour sélectionner les langues.

🎜🎜Dans le composant Translation.vue, ajoutez le code du menu déroulant : 🎜rrreee🎜Dans le code ci-dessus, nous avons utilisé la directive v-model pour lier la valeur du drop- menu inférieur jusqu'à $i18n.locale, il s'agit d'une propriété intégrée fournie par la bibliothèque Vue-i18n. Ensuite, nous pouvons écouter l'événement de changement de langue dans la méthode handleChange et changer le contenu de la page en fonction de la langue sélectionnée. 🎜
🎜Traitement complet des événements pour le changement de langue🎜Dans la méthode handleChange, nous devons actualiser le contenu en rechargeant la page pour afficher les résultats de traduction de la langue sélectionnée. Nous pouvons utiliser la méthode window.location.reload() pour recharger la page. 🎜🎜rrreee🎜🎜Complétez la fonction de commutation multilingue🎜À ce stade, nous avons terminé toutes les étapes pour implémenter la fonction de commutation multilingue à l'aide de PHP et Vue. Maintenant, exécutez le projet Vue et vous verrez un menu déroulant pour sélectionner une langue. En sélectionnant une langue différente, le contenu du texte sur la page changera également en conséquence. 🎜🎜🎜Grâce aux étapes ci-dessus, nous avons implémenté avec succès la fonction de commutation multilingue à l'aide de PHP et Vue. Dans les projets réels, nous pouvons ajouter plus de fichiers de langue selon les besoins et implémenter la commutation multilingue grâce aux instructions de traduction et aux attributs fournis dans la bibliothèque Vue-i18n. Dans le même temps, nous pouvons également personnaliser le menu déroulant pour que la sélection de la langue soit plus belle. La mise en œuvre de la fonction de commutation multilingue offre une meilleure expérience utilisateur aux utilisateurs de différentes langues et jette les bases de l'internationalisation du projet. 🎜🎜(Remarque : ce qui précède n'est qu'un exemple simple, les projets réels peuvent nécessiter plus de configuration et de mise en œuvre de fonctions)🎜

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!