Web-Frontend
js-Tutorial
Kürzlich habe ich ein Problem mit dem Verpackungspfad über vue+webpack entdeckt
Kürzlich habe ich ein Problem mit dem Verpackungspfad über vue+webpack entdeckt
Im Folgenden werde ich einen Artikel mit Ihnen teilen, der das Problem des Vue+Webpack-Verpackungspfads löst. Er hat einen guten Referenzwert und ich hoffe, dass er für alle hilfreich sein wird.
Ich habe kürzlich ein kleines Vue-Projekt geschrieben, das ich nicht als separates Webprojekt veröffentlichen wollte, also hatte ich vor, es im öffentlichen Ordner des Ressourcenprojekts abzulegen Ich fasse sie hier zusammen.
Der Ressourcenpfad lautet wie folgt:
Der für das öffentliche Verzeichnis konfigurierte Zugriffspfad lautet „ /“, auf diese Weise In diesem Fall wird unser Zugriffspfad zu „Domänenname/vue-demo“. Beim Zugriff auf das Programm wurde kein Fehler gemeldet, die Seite war jedoch leer. Bisher gab es keine Probleme mit Projekten, die auf diese Weise veröffentlicht wurden, aber was ist dieses Mal passiert?
Nach sorgfältiger Untersuchung stellte ich fest, dass der Vue-Router Probleme verursachte. Aufgrund der Anforderungen des Projekts muss das Scrollverhalten den Verlaufsmodus aktivieren. In der offiziellen Dokumentation von vue-router gibt es einen solchen Satz:
Wenn Sie den Verlaufsmodus verwenden, ist die URL genau wie eine normale URL, z. B. http://yoursite.com/user/id, und sie sieht auch gut aus!
Um diesen Modus jedoch gut spielen zu können, benötigen Sie auch Unterstützung für die Hintergrundkonfiguration. Da es sich bei unserer Anwendung um eine Single-Page-Client-Anwendung handelt, wird 404 zurückgegeben, wenn der Hintergrund nicht richtig konfiguriert ist und der Benutzer direkt im Browser auf http://oursite.com/user/id zugreift, was nicht gut aussieht .
Sie müssen also auf der Serverseite eine Kandidatenressource hinzufügen, die alle Situationen abdeckt: Wenn die URL mit keiner statischen Ressource übereinstimmt, sollte sie dieselbe index.html-Seite zurückgeben, also die Seite Ihrer App hängt davon ab.
Die von unserem Vue-Router überwachten Pfade sind immer noch „/“ und „/component“ und die natürlichen Pfade stimmen nicht überein.
Daher müssen wir die Routen ändern und den Projektnamen zu jedem Pfad hinzufügen, also „/vue-demo“. Gleichzeitig muss der publicPath, um sicherzustellen, dass die Ressourcendateien korrekt geladen werden, hinzugefügt werden Beim Packen muss auch „/vue-demo“ hinzugefügt werden.
Fertig! !
Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.
Verwandte Artikel:
So implementieren Sie zufälligen Schaltcode der WeChat-ID über JavaScript (ausführliche Anleitung)
Verwendung von ES6 durch WeakMap Lösen Sie das Speicherverlustproblem (ausführliches Tutorial)
Verwenden Sie vue+element-ui+ajax, um eine Instanz einer Tabelle zu implementieren
Das obige ist der detaillierte Inhalt vonKürzlich habe ich ein Problem mit dem Verpackungspfad über vue+webpack entdeckt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1377
52
So verwenden Sie Python + Flask, um Echtzeitaktualisierungen und die Anzeige von Protokollen auf Webseiten zu realisieren
May 17, 2023 am 11:07 AM
1. Protokollausgabe in eine Datei mithilfe des Moduls: Die Protokollierung kann ein Protokoll auf benutzerdefinierter Ebene generieren und das Protokoll auf einem angegebenen Pfad ausgeben: debug (Debug-Protokoll) = 5) {clearTimeout (Zeit) // Wenn alle Ergebnisse erhalten wurden, 10 Aufeinanderfolgende Zeiten sind leer Protokolllöschung geplante Aufgabe}return}if(data.log_type==2){//Wenn ein neues Protokoll abgerufen wird for(i=0;i
So verwenden Sie den Nginx-Webserver-Caddy
May 30, 2023 pm 12:19 PM
Einführung in Caddy Caddy ist ein leistungsstarker und hoch skalierbarer Webserver, der derzeit über 38.000 Sterne auf Github hat. Caddy ist in der Go-Sprache geschrieben und kann für statisches Ressourcen-Hosting und Reverse-Proxy verwendet werden. Caddy verfügt über die folgenden Hauptfunktionen: Im Vergleich zur komplexen Konfiguration von Nginx ist die ursprüngliche Caddyfile-Konfiguration sehr einfach. Sie kann die Konfiguration über die bereitgestellte AdminAPI dynamisch ändern. Sie unterstützt standardmäßig die automatisierte HTTPS-Konfiguration und kann automatisch HTTPS-Zertifikate beantragen und konfigurieren Sie sie; es kann auf Zehntausende von Websites erweitert werden, ohne dass zusätzliche Abhängigkeiten in der Go-Sprache geschrieben werden müssen; die Speichersicherheit ist besser gewährleistet. Zunächst installieren wir es direkt in CentO
Verwendung von Jetty7 für die Webserververarbeitung in der Java-API-Entwicklung
Jun 18, 2023 am 10:42 AM
Verwendung von Jetty7 für die Webserververarbeitung in der JavaAPI-Entwicklung Mit der Entwicklung des Internets ist der Webserver zum Kernbestandteil der Anwendungsentwicklung geworden und steht auch im Fokus vieler Unternehmen. Um den wachsenden Geschäftsanforderungen gerecht zu werden, entscheiden sich viele Entwickler für die Verwendung von Jetty für die Webserverentwicklung, und seine Flexibilität und Skalierbarkeit sind weithin anerkannt. In diesem Artikel wird erläutert, wie Sie Jetty7 für die Webentwicklung in der JavaAPI-Entwicklung verwenden.
Echtzeitschutz vor Gesichtsblockierungsangriffen im Web (basierend auf maschinellem Lernen)
Jun 10, 2023 pm 01:03 PM
Gesichtsblockierendes Sperrfeuer bedeutet, dass eine große Anzahl von Sperrfeuern vorbeischwebt, ohne die Person im Video zu blockieren, sodass es aussieht, als würden sie hinter der Person schweben. Maschinelles Lernen erfreut sich seit mehreren Jahren großer Beliebtheit, aber viele Menschen wissen nicht, dass diese Funktionen auch in Browsern ausgeführt werden können. Dieser Artikel stellt den praktischen Optimierungsprozess in Videosperren vor diese Lösung, in der Hoffnung, einige Ideen zu öffnen. mediapipeDemo (https://google.github.io/mediapipe/) demonstriert das Implementierungsprinzip des On-Demand-Uploads mit Gesichtsblockierung. Die Hintergrundberechnung des Videoservers extrahiert den Porträtbereich im Videobildschirm und konvertiert ihn in SVG Speichern, während der Client das Video abspielt. Laden Sie SVG vom Server herunter und kombinieren Sie es mit Barrage, Portrait
So konfigurieren Sie Nginx, um sicherzustellen, dass der FRP-Server und das Web Port 80 gemeinsam nutzen
Jun 03, 2023 am 08:19 AM
Zunächst werden Sie Zweifel haben: Was ist FRP? Einfach ausgedrückt ist frp ein Intranet-Penetrationstool. Nach der Konfiguration des Clients können Sie über den Server auf das Intranet zugreifen. Jetzt hat mein Server Nginx als Website verwendet und es gibt nur einen Port 80. Was soll ich also tun, wenn der FRP-Server auch Port 80 verwenden möchte? Nach der Abfrage kann dies durch die Verwendung des Reverse-Proxys von Nginx erreicht werden. Hinzufügen: frps ist der Server, frpc ist der Client. Schritt 1: Ändern Sie die Konfigurationsdatei nginx.conf auf dem Server und fügen Sie die folgenden Parameter zu http{} in nginx.conf hinzu: server{listen80
So implementieren Sie die Formularvalidierung für Webanwendungen mit Golang
Jun 24, 2023 am 09:08 AM
Die Formularvalidierung ist ein sehr wichtiger Link bei der Entwicklung von Webanwendungen. Sie kann die Gültigkeit der Daten vor dem Absenden der Formulardaten überprüfen, um Sicherheitslücken und Datenfehler in der Anwendung zu vermeiden. Die Formularvalidierung für Webanwendungen kann einfach mit Golang implementiert werden. In diesem Artikel wird erläutert, wie Sie mit Golang die Formularvalidierung für Webanwendungen implementieren. 1. Grundelemente der Formularvalidierung Bevor wir uns mit der Implementierung der Formularvalidierung befassen, müssen wir die Grundelemente der Formularvalidierung kennen. Formularelemente: Formularelemente sind
So aktivieren Sie den administrativen Zugriff über die Cockpit-Web-Benutzeroberfläche
Mar 20, 2024 pm 06:56 PM
Cockpit ist eine webbasierte grafische Oberfläche für Linux-Server. Es soll vor allem neuen/erfahrenen Benutzern die Verwaltung von Linux-Servern erleichtern. In diesem Artikel besprechen wir die Cockpit-Zugriffsmodi und wie Sie den Administratorzugriff von CockpitWebUI auf das Cockpit umstellen. Inhaltsthemen: Cockpit-Eingabemodi Ermitteln des aktuellen Cockpit-Zugriffsmodus Aktivieren des Verwaltungszugriffs für das Cockpit über CockpitWebUI Deaktivieren des Verwaltungszugriffs für das Cockpit über CockpitWebUI Fazit Cockpit-Eingabemodi Das Cockpit verfügt über zwei Zugriffsmodi: Eingeschränkter Zugriff: Dies ist die Standardeinstellung für den Cockpit-Zugriffsmodus. In diesem Zugriffsmodus können Sie vom Cockpit aus nicht auf den Webbenutzer zugreifen
Was sind Webstandards?
Oct 18, 2023 pm 05:24 PM
Webstandards sind eine Reihe von Spezifikationen und Richtlinien, die vom W3C und anderen verwandten Organisationen entwickelt wurden. Sie umfassen die Standardisierung von HTML, CSS, JavaScript, DOM, Web-Zugänglichkeit und Leistungsoptimierung , Wartbarkeit und Leistung. Das Ziel von Webstandards besteht darin, die konsistente Anzeige und Interaktion von Webinhalten auf verschiedenen Plattformen, Browsern und Geräten zu ermöglichen und so ein besseres Benutzererlebnis und eine bessere Entwicklungseffizienz zu gewährleisten.
