So verwenden Sie PHP und Vue, um die Funktion zum Umschalten mehrerer Sprachen zu implementieren-PHP-Tutorial-php.cn

So verwenden Sie PHP und Vue, um die Funktion zum Umschalten mehrerer Sprachen zu implementieren

WBOY

Freigeben： 2023-09-24 12:10:01

Original

1177 Leute haben es durchsucht

So verwenden Sie PHP und Vue, um die Funktion zum Umschalten mehrerer Sprachen zu implementieren

Im heutigen Internetzeitalter ist die Funktionalität mehrerer Sprachen zu einem Bedarf geworden, der nicht ignoriert werden kann. Unabhängig davon, ob es sich um eine Website oder eine mobile Anwendung handelt, müssen Sie mehrere Sprachen unterstützen. In diesem Artikel wird erläutert, wie Sie mithilfe von PHP und Vue die Funktion zum Umschalten mehrerer Sprachen implementieren, und es werden spezifische Codebeispiele bereitgestellt.

Vorbereitung
Zuerst müssen wir die Entwicklungsumgebung vorbereiten. Stellen Sie sicher, dass Sie PHP und Vue-bezogene Entwicklungstools wie den PHP-Interpreter und Vue-cli installiert haben.
Sprachdateien erstellen
Erstellen Sie einen Ordner im Projekt, um Übersetzungsdateien in verschiedenen Sprachen zu speichern. Beispielsweise können wir einen Ordner namens „lang“ erstellen und darin mehrere Dateien erstellen, wobei jede Datei eine Sprache repräsentiert. Jede Datei speichert spezifische Übersetzungsinhalte in Form von Schlüssel-Wert-Paaren.

Erstellen Sie beispielsweise eine Datei mit dem Namen „zh_CN.json“ mit folgendem Inhalt:

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

Nach dem Login kopieren

Gleichzeitig können Sie auch eine Datei mit dem Namen „en_US.json“ mit folgendem Inhalt erstellen:

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

Nach dem Login kopieren

Das ist möglich Erstellen Sie nach Bedarf weitere Dateien in mehreren Sprachen.

Vue-Komponente erstellen
Erstellen Sie im Vue-Projekt eine Komponente zum Anzeigen von Text. Beispielsweise können wir eine Komponente namens „Translation.vue“ erstellen.

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

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

Nach dem Login kopieren

Im obigen Code verwenden wir die Direktive $t, um den übersetzten Text abzurufen. Dies ist eine integrierte Anweisung, die von der Vue-i18n-Bibliothek bereitgestellt wird. $t指令来获取翻译后的文本。这是Vue-i18n库提供的内置指令。

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

npm install vue-i18n --save

Nach dem Login kopieren

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

Nach dem Login kopieren

在上面的代码中，我们首先要导入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>

Nach dem Login kopieren

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

完成语言切换的事件处理
在handleChange方法中，我们需要通过重新加载页面来刷新内容，以展示选中语言的翻译结果。我们可以使用window.location.reload()
Im Vue-Projekt können wir die Vue-i18n-Bibliothek verwenden, um die Mehrsprachenumschaltfunktion zu implementieren. Zuerst müssen wir die Vue-i18n-Bibliothek installieren. Installieren Sie die Vue-i18n-Bibliothek im Projekt, indem Sie den folgenden Befehl ausführen:
1. ```
handleChange() {
  window.location.reload();
}
```
  Nach dem Login kopieren
  In der Eintragsdatei des Vue-Projekts müssen wir den folgenden Code hinzufügen: rrreeeIm obigen Code müssen wir zuerst die importieren VueI18n-Bibliothek und registrieren Sie sie bei der Vue-Instanz. Anschließend haben wir durch die Erstellung einer neuen VueI18n-Instanz die Standardsprache auf „zh_CN“ festgelegt und die chinesischen und englischen Sprachdateien importiert.
  Das obige ist der detaillierte Inhalt vonSo verwenden Sie PHP und Vue, um die Funktion zum Umschalten mehrerer Sprachen zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!