Jak zmienić numer portu w Vue CLI

Vue.JS jest solidnym i modnym front-end framework. Jest to rozpoznawane jako kombinacja dwóch spektakularnych ram, kątowych i react, przy użyciu składni szumowej metody reagowania kątowego i rekwizytów. Zapewnia tradycyjny sposób HTML i CSS do stworzenia komponentu i jest znany z tworzenia aplikacji front-end naprawdę szybki i w łatwy sposób. Często jednak musimy stawić czoła pewnym problemom i problemom lub po prostu chcemy innej konfiguracji, więc przyjrzymy się scenariuszowi, w którym musimy zmienić numer portu w projekcie Vue CLI. Zaczynajmy.

Domyślny numer portu Vue CLI

Po uruchomieniu projektu vue za pomocą NPM Run Serve polecenie, numer portu 8080 jest automatycznie przypisywany do projektu vue i działa na tym numerze portu. Podczas uruchamiania vue.JS Project, terminal pokazuje dane wyjściowe takiego:

$ NPM Run Serve

Na zrzucie ekranu podanym powyżej, przypisany port domyślny jest 8080, gdzie działa projekt. W rzadkim scenariuszu, jeśli port 8080 jest zajęty, Port 8081 jest przypisany do projektu Vue, i tak kontynuuje, dopóki nie znajdzie bezpłatnego numeru portu. Ale co, jeśli chcesz zmienić i przypisać inny numer portu własnego wyboru. Zobaczmy i dowiedzmy się, jak zmienić domyślny numer portu w projekcie Vue CLI.

Zmień domyślny numer portu Vue CLI

Istnieją dwa sposoby zmiany domyślnej przypisanej numeru portu na vue.Projekt JS. Jednym z nich jest tymczasowo zmiana numeru portu, a drugim jest trwale zmiana numeru portu. Zacznijmy więc od pierwszej metody zmiany numeru portu Vue CLI.

Metoda 1: Tymczasowo zmień numer portu
Numer portu projektu Vue CLI można łatwo zmienić podczas uruchamiania Vue.Projekt JS przy użyciu NPM Run Serve; po prostu musisz dołączyć - -Port z liczbą portu twojego pragnienia do NPM Run Serve polecenie, jak pokazano w poleceniu podanym poniżej:

$ NPM Run Serve ---port 4000

Teraz, gdy projekt zostanie pomyślnie skompilowany, możesz zobaczyć, że numer portu jest zmieniany na 4000.

Możesz być świadkiem na zrzucie ekranu powyżej, że aplikacja działa w porcie 4000, Ale ten port jest tymczasowo przypisywany do uruchomienia aplikacji. Po zakończeniu partii i uruchomieniu projektu bez dostarczania portu do NPM Run Serve polecenie, wówczas domyślny port 8080 zostanie ponownie przypisany lub w inny sposób, musisz przypisać port za każdym razem, gdy uruchamiasz aplikację. Na szczęście mamy inną metodę dostarczoną przez Vue.JS, korzystając z którego możemy trwale zmienić numer portu naszego projektu Vue, więc przejdźmy dalej i zobaczmy, jak na stałe zmienić numer portu projektu Vue CLI.

Metoda 2: Zmień numer portu projektu Vue CLI
Jeśli chcesz zmienić domyślny numer portu swojego vue.Projekt JS na stałe. Po prostu wykonaj kroki podane poniżej, a będziesz mieć własny pożądany numer portu przypisany do swojego vue.Projekt JS.

Krok 1: Stwórz nowy Vue.konfigurator.JS plik w katalogu głównym

Przede wszystkim musisz utworzyć nowy plik w katalogu głównym projektu z nazwą Vue.konfigurator.JS

Krok 2: Dodaj numer portu w Vue.konfigurator.JS plik konfiguracyjny

Po utworzeniu pliku konfiguracyjnego otwórz go i podaj żądany numer portu jako parę wartości kluczowej wewnątrz Devserver obiekt w moduł.eksport Jak pokazano w kodzie fragmentu poniżej:

moduł.Exports =
Devserver:
Port: 3000

Gdy to zrobisz, zapisz aplikację, naciskając Ctrl + s Klawisze skrótów klawiatury i uruchom aplikację.

Krok 3: Uruchom aplikację

Teraz uruchom aplikację za pomocą NPM Run Serve polecenie i bez dołączania dowolnego numeru portu.

$ NPM Run Serve

Będziesz świadkiem, że numer portu 3000 jest pomyślnie przypisany, a aplikacja działa na dostarczonym numerze portu w Vue.konfigurator.JS plik.

W ten sposób możesz zmienić lub ustawić numer portu własnego wyboru w projekcie Vue CLI.

Wniosek

Ten post nauczył się dwóch różnych sposobów zmiany lub ustawiania numeru portu tymczasowego i na stałe w projekcie Vue CLI i wyjaśniony w głębokiej i łatwej do zrozumienia metodzie krok po kroku.