So ändern Sie die Portnummer in Vue CLI

Vue.JS ist ein robuster und trendiger Front-End-Rahmen. Es wird als Kombination aus zwei spektakulären Gerüsts erkannt, Dreh- und Reakt. Es bietet die herkömmliche Methode zur Erstellung einer Komponente und ist dafür bekannt, Front-End-Anwendungen sehr schnell und auf einfache Weise zu erstellen. Wir müssen uns jedoch häufig mit Problemen und Problemen konfrontiert oder nur eine andere Konfiguration wünschen. Daher sehen wir uns ein Szenario an, in dem wir die Portnummer im Vue CLI -Projekt ändern müssen. Lasst uns beginnen.

Standard -Portnummer der VUE CLI

Wenn Sie ein Vue -Projekt mit dem ausführen NPM Run Serve Der Befehl, die Portnummer 8080 wird dem VUE -Projekt automatisch zugeordnet und wird auf dieser Portnummer ausgeführt. Während eines Vue leitet.JS -Projekt zeigt das Terminal die Ausgabe so etwas:

$ npm run serve service

In dem oben angegebenen Screenshot ist der Standardport zugewiesen 8080, wo das Projekt läuft. In einem seltenen Szenario wird dem Vue -Projekt Port 8081 zugewiesen, wenn Port 8080 beschäftigt ist, und so wird es fortgesetzt, bis es die kostenlose Portnummer findet. Aber was ist, wenn Sie sich ändern und eine andere Portnummer Ihrer eigenen Wahl zuweisen möchten. Lassen Sie uns sehen und lernen, wie Sie die Standardportnummer im Vue CLI -Projekt ändern können.

Ändern Sie die Standardportnummer der Vue CLI

Nun, es gibt zwei Möglichkeiten, den Standard -zugewiesenen Standard -zugewiesene Portnummer dem VUE zu ändern.JS -Projekt. Eine soll die Portnummer vorübergehend ändern, und die zweite besteht darin, die Portnummer dauerhaft zu ändern. Beginnen wir also mit der ersten Methode zur Änderung der Portzahl von Vue CLI.

Methode 1: Die Portnummer vorübergehend ändern
Die Portnummer des Vue CLI -Projekts kann beim Ausführen des VUE leicht geändert werden.JS -Projekt verwendet das NPM Run Serve; Sie müssen einfach anhängen - -Hafen mit der Portnummer Ihres Verlangens an die NPM Run Serve Befehl wie im unten angegebenen Befehl angezeigt:

$ npm run serve - -port 4000

Wenn das Projekt jetzt erfolgreich zusammengestellt wird, können Sie feststellen, dass die Portnummer auf geändert wird 4000.

Sie können in dem oben angegebenen Screenshot miterleben, dass die Anwendung am Port ausgeführt wird 4000, Dieser Port wird jedoch vorübergehend zugewiesen, bis die App ausgeführt wird. Sobald Sie die Charge beendet haben und das Projekt ausführen, ohne den Port dem Port zur Verfügung zu stellen NPM Run Serve Der Befehl, dann wird der Standardport 8080 erneut zugewiesen, oder auf andere Weise müssen Sie den Port jedes Mal zuweisen, wenn Sie die Anwendung ausführen. Zum Glück haben wir eine andere Methode von Vue bereitgestellt.JS, mit dem wir die Portnummer unseres VUE -Projekts dauerhaft ändern können.

Methode 2: Die Portnummer des Vue -CLI -Projekts dauerhaft ändern
Wenn Sie daran interessiert sind, die Standardportnummer Ihres VUE zu ändern.JS -Projekt dauerhaft. Befolgen Sie einfach die unten angegebenen Schritte, und Sie haben Ihre eigene gewünschte Portnummer Ihrem VUE zugewiesen.JS -Projekt.

Schritt 1: Erstelle eine neue Vue.Konfiguration.JS Datei im Stammverzeichnis

Zunächst müssen Sie eine neue Datei im Stammverzeichnis Ihres Projekts mit dem Namen erstellen Vue.Konfiguration.JS

Schritt 2: Portnummer in die Fügen Sie in die Vue.Konfiguration.JS Konfigurationsdatei

Öffnen Sie nach dem Erstellen der Konfigurationsdatei sie und geben Sie die gewünschte Portnummer als Schlüsselwertpaar im Inneren der gewünschten Portnummer an Devserver Objekt in der Modul.Exporte Wie im Code -Snippet unten gezeigt:

Modul.exports =
DevServer:
Port: 3000

Sobald Sie dies getan haben, speichern Sie die Anwendung durch Drücken Strg + s Tastaturverknüpfungsschlüsse und Start der Anwendung.

Schritt 3: Führen Sie die Anwendung aus

Starten Sie nun die Anwendung mit dem NPM Run Serve Befehl und ohne Anschlussnummer anzugreifen.

$ npm run serve service

Sie werden beobachten, dass die Portnummer 3000 erfolgreich zugewiesen wird und die Bewerbung auf Ihrer bereitgestellten Portnummer in den Vue.Konfiguration.JS Datei.

So können Sie die Portnummer Ihrer eigenen Wahl im Vue CLI -Projekt ändern oder festlegen.

Abschluss

Dieser Beitrag hat zwei verschiedene Möglichkeiten gelernt, die Portnummer vorübergehend und dauerhaft in einem Vue-CLI-Projekt zu ändern oder festzulegen und in einer tiefgreifenden und leicht verständlichen Schritt-für-Schritt-Methode zu erklären.