Výchozí číslo portu Vue CLI
Když spustíte projekt Vue pomocí NPM běh sloužit příkazu, je portu 8080 automaticky přiřazeno projektu Vue a běží na tomto čísle portu. Při spuštění Vue.js projekt, terminál ukazuje výstup něco takového:
$ npm běh sloužit
Na výše uvedeném snímku obrazovky je přiřazen výchozí port 8080, kde projekt běží. Ve vzácném scénáři, pokud je port 8080 zaneprázdněn, je portu 8081 přiřazen projekt Vue a takto to pokračuje, dokud nenajde volné číslo portu. Ale co když chcete změnit a přiřadit jiné číslo portu podle vlastního výběru. Podívejme se a naučíme se, jak změnit výchozí číslo portu v projektu Vue CLI.
Změňte výchozí číslo portu Vue CLI
Existují dva způsoby, jak změnit výchozí přiřazené číslo portu Vue.projekt js. Jedním z nich je dočasně změnit číslo portu a druhým je trvale změnit číslo portu. Začněme tedy první metodou změny čísla portu Vue CLI.
Metoda 1: Dočasně změňte číslo portu
Číslo portu projektu Vue CLI lze během provozu Vue snadno změnit.js projekt pomocí NPM běh sloužit; jednoduše musíte přidat - -přístav s číslem portu vašeho přání do NPM běh sloužit příkaz, jak je znázorněno v níže uvedeném příkazu:
Nyní, když je projekt úspěšně zkompilován, můžete vidět, že číslo portu bylo změněno na 4000.
Na výše uvedeném snímku obrazovky můžete být svědky toho, že aplikace běží na portu 4000, ale tento port je přiřazen dočasně, dokud není spuštěna aplikace. Jakmile ukončíte dávku a spustíte projekt bez poskytnutí portu do NPM běh sloužit příkaz, pak bude znovu přiřazen výchozí port 8080, jinak budete muset přiřadit aplikaci při každém spuštění aplikace. Naštěstí máme další metodu poskytnutou Vue.js, pomocí kterého můžeme trvale změnit číslo portu našeho projektu Vue, tak pojďme a podívejme se, jak trvale změnit číslo portu projektu Vue CLI.
Metoda 2: Trvale změnit číslo portu projektu Vue CLI
Pokud máte zájem změnit výchozí číslo portu vašeho zařízení Vue.projekt js trvale. Jednoduše postupujte podle níže uvedených kroků a vašemu Vue bude přiřazeno vaše vlastní číslo portu.projekt js.
Krok 1: Vytvoř nový vue.konfigurace.js soubor v kořenovém adresáři
Nejprve musíte v kořenovém adresáři projektu vytvořit nový soubor se jménem vue.konfigurace.js
Krok 2: Přidejte číslo portu do vue.konfigurace.js konfigurační soubor
Po vytvoření konfiguračního souboru jej otevřete a zadejte požadované číslo portu jako pár klíč – hodnota uvnitř devServer objekt v modul.vývoz jak je ukázáno v úryvku kódu níže:
modul.exporty =devServer:
port: 3000
Jakmile to uděláte, uložte aplikaci stisknutím CTRL + S klávesové zkratky a spusťte aplikaci.
Krok 3: Spusťte aplikaci
Nyní spusťte aplikaci pomocí NPM běh sloužit bez připojení čísla portu.
$ npm běh sloužit
Uvidíte, že číslo portu 3000 je úspěšně přiřazeno a aplikace běží na zadaném čísle portu v vue.konfigurace.js soubor.
Takto můžete změnit nebo nastavit číslo portu podle vlastního výběru v projektu Vue CLI.
Závěr
Tento příspěvek se naučil dvěma různými způsoby, jak dočasně a trvale změnit nebo nastavit číslo portu v projektu Vue CLI, a vysvětlil hlubokou a snadno srozumitelnou metodou krok za krokem.