Cum se schimbă numărul de port în Vue CLI

Vue.js este un cadru front-end robust și la modă. Este recunoscută ca fiind combinația a două cadre spectaculoase, Angular și React, folosind sintaxa de modelare a metodei Angular și recuzită a React. Oferă metoda tradițională HTML și CSS de a crea o componentă și este cunoscută pentru că face aplicațiile front-end foarte rapide și într-un mod ușor. Cu toate acestea, trebuie să ne confruntăm adesea cu unele probleme și probleme sau dorim doar o configurație diferită, așa că vom arunca o privire la un scenariu în care trebuie să schimbăm numărul portului în proiectul Vue CLI. Să începem.

Număr port implicit Vue CLI

Când executați un proiect Vue utilizând npm run serve comanda, numărul de port 8080 este atribuit automat proiectului Vue și rulează pe acel număr de port. În timp ce executați un Vue.js, terminalul arată ieșirea ceva de genul acesta:

$ npm run serve

În captura de ecran prezentată mai sus, portul implicit atribuit este 8080, unde rulează proiectul. Într-un scenariu rar, dacă portul 8080 este ocupat, portul 8081 este atribuit proiectului Vue și acesta continuă până când găsește numărul portului liber. Dar, dacă doriți să modificați și să atribuiți un alt număr de port la alegere. Să vedem și să învățăm cum să schimbăm numărul de port implicit din proiectul Vue CLI.

Modificați numărul de port implicit al Vue CLI

Ei bine, există două moduri de a schimba implicit un număr de port pentru Vue.js proiect. Una este schimbarea temporară a numărului portului, iar a doua este schimbarea permanentă a numărului portului. Deci, să începem cu prima metodă de modificare a numărului de port al Vue CLI.

Metoda 1: Schimbați numărul portului temporar
Numărul de port al proiectului Vue CLI poate fi ușor modificat în timpul rulării Vue.js folosind npm run serve; pur și simplu trebuie să atașați - -port cu numărul portului dorit de dvs. către npm run serve după cum se arată în comanda dată mai jos:

$ npm run serve - --port 4000

Acum, când proiectul este compilat cu succes, puteți vedea că numărul portului este schimbat în 4000.

Puteți asista la captura de ecran de mai sus că aplicația rulează la port 4000, dar acest port este atribuit temporar până când aplicația rulează. După ce terminați lotul și rulați proiectul fără a furniza portul către npm run serve , apoi portul implicit 8080 va fi atribuit din nou, sau altfel, trebuie să atribuiți portul de fiecare dată când rulați aplicația. Din fericire, avem o altă metodă oferită de Vue.js, folosind care putem schimba permanent numărul de port al proiectului nostru Vue, așa că haideți să vedem cum să schimbăm permanent numărul de port al proiectului Vue CLI.

Metoda 2: Schimbați permanent numărul de port al proiectului Vue CLI
Dacă sunteți interesat să modificați numărul de port implicit al Vue.js proiect permanent. Pur și simplu urmați pașii de mai jos și veți avea propriul număr de port dorit atribuit Vue-ului dvs.js proiect.

Pasul 1: Creaza un nou vue.config.js din directorul rădăcină

În primul rând, trebuie să creați un fișier nou în directorul rădăcină al proiectului dvs. cu numele vue.config.js

Pasul 2: Adăugați numărul portului în vue.config.js Fișier de configurare

După crearea fișierului de configurare, deschideți-l și furnizați numărul de port dorit ca o pereche cheie-valoare în interiorul devServer obiect în modul.exporturi așa cum se arată în fragmentul de cod de mai jos:

modul.exporturi =
devServer:
port: 3000

După ce ați făcut acest lucru, salvați aplicația apăsând CTRL + S tastele de comenzi rapide de la tastatură și porniți aplicația.

Pasul 3: Rulați aplicația

Acum, porniți aplicația folosind npm run serve comandă și fără a adăuga niciun număr de port.

$ npm run serve

Veți asista că numărul de port 3000 este atribuit cu succes, iar aplicația rulează pe numărul de port furnizat în vue.config.js fişier.

Acesta este modul în care puteți modifica sau seta numărul portului la alegere în proiectul Vue CLI.

Concluzie

Această postare a învățat două moduri diferite de a schimba sau seta numărul portului temporar și permanent într-un proiect Vue CLI și a explicat printr-o metodă profundă și ușor de înțeles pas cu pas.