Comment utiliser PHP et Vue pour implémenter la fonction de commutation multilingue-tutoriel php-php.cn

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

WBOY

Libérer： 2023-09-24 12:10:01

original

1178 Les gens l'ont consulté

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.

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.
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": "欢迎"
}

Copier après la connexion

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

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

Copier après la connexion

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

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>

Copier après la connexion

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库提供的内置指令。

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

npm install vue-i18n --save

Copier après la connexion

在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');

Copier après la connexion

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

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

在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>

Copier après la connexion

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

完成语言切换的事件处理
在handleChange方法中，我们需要通过重新加载页面来刷新内容，以展示选中语言的翻译结果。我们可以使用window.location.reload()
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 :
1. ```
handleChange() {
  window.location.reload();
}
```
  Copier après la connexion
  Dans le fichier d'entrée du projet Vue, nous devons ajouter le code suivant : rrreeeDans 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.
  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!