Eine Einführung in die Interaktion von auf Vue-cli basierenden Projekten mit dem Backend

In diesem Artikel wird hauptsächlich die Interaktion von auf Vue-cli basierenden Projekten mit dem Backend vorgestellt und erläutert. Der Inhalt ist jetzt recht gut und dient als Referenz.

Während dieser Zeit habe ich Vue für die Entwicklung verwendet, aber das meiste davon verwendete eine einfache Datenbindung. Nachdem ich viele Fallstricke durchgemacht habe, habe ich es zusammengefasst und hoffe, dass es Freunden hilft, die gerade erst angefangen haben, zu kämpfen.

FAQ 1: Nach dem Einrichten der Umgebung mit vue-cli sind der lokale Domänenname und der Domänenname der Testumgebung inkonsistent. Wie kann domänenübergreifend auf die Backend-Schnittstelle zugegriffen werden?

Suchen Sie index.js im Konfigurationsverzeichnis und fügen Sie Folgendes unter dev hinzu:

proxyTable: {
  '/api':{//指定以/api开头的接口都走代理
   target:'https://yhhdtest.moguyun.com',//需要连接后台接口的域名
   changeOrigin:true,//支持跨域
   pathRewrite:{
    '/api':''
   }
  }
 },

Die obige Konfiguration ist tatsächlich dev- Der Server verwendet das sehr leistungsstarke http-proxy-middleware-Paket. Informationen zur erweiterten Verwendung finden Sie in der Dokumentation.

Anfrage /api/getGame Die tatsächlich gesendete Anfrage ist https://yhhdtest.moguyun.com/getGame

Konfigurieren Sie eine Hintergrundanfrage, die für lokale und Produktionsumgebungen geeignet ist

Nach der oben beschriebenen Konfiguration kann die lokale Umgebung domänenübergreifend erfolgreich mit dem Backend interagieren. Allerdings muss jeder Schnittstelle ein unnötiges /api-Präfix vorangestellt werden, was eigentlich nicht mit unserer Produktion übereinstimmt. Zu diesem Zeitpunkt müssen wir einige Konfigurationen vornehmen und durch Kompilierung unterscheiden.

Suchen Sie dev bzw. prod unter index.js (einige Projekte können direkt extrahiert und in separate Dateien umgewandelt werden)

dev.env.js

module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 API_HOST:'"/api/"'
})

prod.env.js

module.exports = {
 NODE_ENV: '"production"',
 API_HOST:'""'
}

Der entscheidende Punkt ist API_HOST, unsere Anfrage zu diesem Zeitpunkt Sie kann so schreiben

process.env.API_HOST+'/getGame'

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein Achtung auf die chinesische PHP-Website!

Verwandte Empfehlungen:

Über die Ideen von vue zur Lösung von domänenübergreifenden Routing-Konflikten

Über das Frontend von vue.js und Back-End-Daten Interaktionsvorgang zum Senden von Daten

Einführung in den Prozess der Rekonstruktion mehrseitiger Gerüste basierend auf Vue CLI

Das obige ist der detaillierte Inhalt vonEine Einführung in die Interaktion von auf Vue-cli basierenden Projekten mit dem Backend. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!