Was soll ich tun, wenn das Vue-Projekt beim Umleiten im IE-Routing einen Fehler meldet?

Wenn Sie ein Projekt entwickeln, das das Vue.js-Framework verwendet und Vue Router zum Verwalten von Routen verwendet, kann ein Problem auftreten: Im IE-Browser meldet Route Jump einen Fehler.

Dieses Problem wird normalerweise dadurch verursacht, dass Vue Router den Verlaufsmodus von HTML5 verwendet, der IE-Browser unterstützt diesen Modus jedoch nicht. Aber keine Sorge, im Folgenden zeigen wir Ihnen, wie Sie dieses Problem beheben können.

Lösung

1. Einführung von Polyfill

Für den HTML5-Verlaufsmodus muss der Browser die HTML5-API und nur den IE-Browser unterstützen Ältere Versionen der HTML-API werden unterstützt, daher müssen wir Polyfills verwenden, um sie kompatibel zu machen.

Sie können den folgenden Code verwenden, um Polyfill einzuführen:

<!-- 引入 polyfill -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

2. Routing-Modus konfigurieren

Zur Lösung Das Problem, das der IE-Browser nicht unterstützt. Für das Problem des Verlaufsmodus müssen wir den Routing-Modus des Vue Routers ändern. Ändern Sie den Standard-Verlaufsmodus in den Hash-Modus.

In der Vue-Router-Konfigurationsdatei finden Sie den folgenden Code:

const router = new VueRouter({
  mode: 'history',
  routes
})

Ersetzen Sie mode 的值由 history 改为 hash durch:

const router = new VueRouter({
  mode: 'hash',
  routes
})

3. Konfigurieren der Server

Wenn Ihr Projekt während der Bereitstellung mit dem Server interagieren muss, müssen Sie den Server so konfigurieren, dass er Routensprünge unterstützt. Wenn der Benutzer im Verlaufsmodus von Vue Router eine Adresse in die Adressleiste des Browsers eingibt, geht der Server standardmäßig davon aus, dass der Benutzer auf eine Datei oder ein Verzeichnis unter der Adresse zugreifen muss, und sendet die Anfrage an den Server Dateisystem zur Verarbeitung. In der Praxis bevorzugen wir es jedoch, die Anfrage zur Verarbeitung an Vue Router zu senden, damit die aktuelle Seite korrekt gerendert werden kann.

Wenn Sie Node.js als Server verwenden, können Sie es über den folgenden Code konfigurieren:

const express = require('express')
const app = express()

app.use(express.static(__dirname + '/dist'))

// 对所有请求都返回 index.html 文件
app.get('*', function(req, res) {
  res.sendFile(__dirname + '/dist/index.html')
})

const port = process.env.PORT || 8080
app.listen(port, () => {
  console.log(`Server started at ${port}`)
})

Der obige Code verwendet das Express-Framework und richtet einen statischen Ordner ein zum Speichern der statischen Ressourcen der Website. Bei allen Anfragen wird die Datei index.html zurückgegeben, um sicherzustellen, dass Vue Router ordnungsgemäß funktioniert und Umleitungsanfragen verarbeitet.

Zusammenfassung

Das Obige ist die Methode zum Beheben des Routing-Sprungfehlers des Vue-Projekts unter dem IE-Browser. Wenn dieses Problem auftritt, können Sie aus Kompatibilitätsgründen versuchen, Polyfill zu verwenden, den Routing-Modus zu ändern oder den Server zu konfigurieren. Unter der Voraussetzung, dass die Änderungen korrekt sind, kann das Projekt normal im IE-Browser ausgeführt werden.

Das obige ist der detaillierte Inhalt vonWas soll ich tun, wenn das Vue-Projekt beim Umleiten im IE-Routing einen Fehler meldet?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!