Vue-Router-Verlaufsmodus, serverseitiger Konfigurationsprozess-Datensatz

Geschichtsroute

Der Verlaufsmodus bezieht sich auf den Modus zur Implementierung des clientseitigen Routings mithilfe der Verlaufs-API von HTML5. Seine typische Leistung besteht darin, das # im URL-Pfad im Hash-Modus zu entfernen. Bei Verwendung von Vue-Router ist es sehr einfach, den Verlaufsmodus zu aktivieren. Sie müssen beim Instanziieren der Route nur das Konfigurationselement mode:'history' übergeben. Wenn jedoch keine Serverunterstützung vorhanden ist, kann die auf der historyAPI basierende Route nicht direkt über die URL-Adressleiste auf die angegebene Seite zugreifen. Dies ist leicht zu verstehen, da das Eingeben in die URL-Adressleiste und Drücken der Eingabetaste dem Senden einer GET-Anforderung entspricht. Der Routenpfad ohne # ist dann derselbe wie die normale API-Schnittstelle. Da der Server eine solche Schnittstelle nicht definiert, ist es normal, beim direkten Zugriff eine 404-Seite anzuzeigen.

Offizielle Beispiele

Die offizielle Website bietet viele Möglichkeiten, mit diesem Szenario umzugehen. Nehmen Sie als Beispiel die node.js-Version:

const http = erfordern('http').
const fs = erfordern('fs')
const httpPort = 80

http.createServer((req, res) => {
  fs.readFile('index.htm', 'utf-8', (err, content) => {
    wenn (Fehler) {
      console.log('Wir können die Datei "index.htm" nicht öffnen.')
    }

    res.writeHead(200, {
      „Inhaltstyp“: „text/html; Zeichensatz=utf-8“
    })

    res.end(Inhalt)
  })
}).listen(httpPort, () => {
  console.log('Server lauscht auf: http://localhost:%s', httpPort)
})

Es ist nicht schwer zu erkennen, dass die Verarbeitungsidee darin besteht, alle Anforderungen zwangsweise auf die Startseite umzuleiten. Dies entspricht einer Serverblockierung, wenn die Zugriffsressource nicht vorhanden ist, und überlässt die Routing-Arbeit dem Client. Auf diese Weise meldet das Front-End-Routing mit aktiviertem Verlaufsmodus keinen Fehler, wenn die Unterseite direkt lokalisiert wird.

Konfiguration des Vue-Router-Verlaufsmodus

Für den Verlaufsmodus des Vue-Routers muss der Modus in der Routing-Konfiguration auf „Verlauf“ eingestellt werden. Zudem ist auf der Serverseite eine entsprechende Konfiguration erforderlich.

Im Vergleich zum Hash-Modus enthält die URL der Seite im Verlaufsmodus weniger Symbole wie #:

Hash: www.example.com/#/login

Verlauf: www.example.com/login

In einer Einzelseitenanwendung fordert der Browser im Verlaufsmodus diese Seite vom Server an, der Server verfügt jedoch nicht über diese Seite und gibt 404 zurück. Daher müssen Sie zu diesem Zeitpunkt den Server konfigurieren: Zusätzlich zu den statischen Ressourcen müssen Sie die Datei index.html der Einzelseitenanwendung zurückgeben.

Serverkonfiguration - nodejs

Im Node.JS-Server müssen Sie das Modul „Connect-History-API-Fallback“ einführen, um den Verlaufsmodus zu handhaben, und dieses Modul verwenden, bevor Sie die Middleware zur Verarbeitung statischer Ressourcen verwenden:

const Pfad = require('Pfad')
// Importieren Sie das Modul, das den Verlaufsmodus verwaltet. const history = require('connect-history-api-fallback')
const express = erfordern('express')

const app = express()

// Registrieren Sie die Middleware für die Handhabung des Verlaufsmodus app.use(history())
// Middleware zur Verarbeitung statischer Ressourcen app.use(express.static(path.join(__dirname, './web')))

app.listen(3000, () => {
    console.log('Dienst auf Port 3000 gestartet')
})

Serverkonfiguration - nginx

Legen Sie zuerst die gepackten Dateien in den HTML-Ordner, öffnen Sie dann die Datei nginx.conf im conf-Ordner und ändern Sie die folgende Konfiguration:

http {
    # ...andere Konfiguration
    Server {
        # ...andere Konfiguration
        Standort / {
            Stamm-HTML;
            Index Index.html Index.htm;
            Versuchen Sie, Dateien $uri $uri/ /index.html zu versuchen.
        }
    }
}

Zusammenfassen

Dies ist das Ende dieses Artikels über die serverseitige Konfiguration des Vue-Router-Verlaufsmodus. Weitere relevante Inhalte zur Konfiguration des Vue-Router-Verlaufsmodus finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!