Kaip pakeisti uosto numerį Vue CLI

Vue.„js“ yra tvirta ir madinga „front-end“ sistema. Naudojant „Angular“ ir „rekvizitų“ šablonų sintaksę, jis pripažįstamas dviejų įspūdingų rėmų „Angular“ ir „React“ deriniu. Tai suteikia tradicinį HTML ir CSS būdą sukurti komponentą, be to, jis yra žinomas dėl to, kad priekinės programos yra labai greitos ir paprastos. Tačiau dažnai tenka susidurti su tam tikromis problemomis ir problemomis arba tiesiog norime kitokios konfigūracijos, todėl apžvelgsime scenarijų, kai „Vue CLI“ projekte turime pakeisti prievado numerį. Pradėkime.

Numatytasis „Vue“ CLI prievado numeris

Kai vykdote „Vue“ projektą naudodami npm bėgimo tarnauti komandą, uosto numeris 8080 automatiškai priskiriamas „Vue“ projektui ir jis veikia tuo prievado numeriu. Važiuodamas „Vue“.js projektas, terminalas rodo išvestį maždaug taip:

$ npm bėgimas

Aukščiau pateiktoje ekrano kopijoje numatytasis prievadas yra 8080 m, kur vykdomas projektas. Retais atvejais, jei 8080 prievadas užimtas, 8081 prievadas priskiriamas „Vue“ projektui ir taip jis tęsiasi tol, kol randa laisvo prievado numerį. Bet ką daryti, jei norite pakeisti ir priskirti kitą savo pasirinktą prievado numerį. Pažiūrėkime ir sužinokime, kaip pakeisti numatytąjį „Vue“ CLI projekto prievado numerį.

Pakeiskite numatytąjį „Vue“ CLI prievado numerį

Na, yra du būdai, kaip pakeisti numatytąjį priskirtą prievado numerį „Vue“.js projektas. Vienas iš jų yra laikinai pakeisti uosto numerį, o antrasis - visam laikui pakeisti uosto numerį. Taigi, pradėkime nuo pirmojo „Vue CLI“ prievado numerio keitimo metodo.

1 metodas: laikinai pakeiskite prievado numerį
Vue CLI projekto prievado numerį galima lengvai pakeisti vykdant „Vue“.js projektas naudojant npm bėgimo tarnauti; jūs tiesiog turite pridėti - -uostas su savo noro uosto numeriu npm bėgimo tarnauti komanda, kaip parodyta toliau pateiktoje komandoje:

$ npm bėgimas - - 4000

Dabar, kai projektas sėkmingai sukompiliuojamas, galite pamatyti, kad prievado numeris pakeistas į 4000.

Aukščiau pateiktoje ekrano kopijoje galite įsitikinti, kad programa veikia uoste 4000, bet šis prievadas priskiriamas laikinai, kol programa veikia. Kai baigsite paketą ir vykdysite projektą, nepateikdami prievado npm bėgimo tarnauti komandą, tada vėl bus priskirtas numatytasis 8080 prievadas, priešingu atveju turite priskirti prievadą kiekvieną kartą, kai paleidžiate programą. Laimei, mes turime kitą metodą, kurį pateikė „Vue“.js, kurį naudodami galime visam laikui pakeisti „Vue“ projekto prievado numerį, todėl eikime į priekį ir pažiūrėkime, kaip visam laikui pakeisti „Vue CLI“ projekto prievado numerį.

2 metodas: visam laikui pakeiskite „Vue“ CLI projekto prievado numerį
Jei jus domina pakeisti numatytąjį „Vue“ prievado numerį.js projektas visam laikui. Tiesiog atlikite toliau nurodytus veiksmus ir turėsite savo norimą prievado numerį, priskirtą jūsų „Vue“.js projektas.

1 žingsnis: Sukurkite naują vue.konfigūruoti.js failą šakniniame kataloge

Visų pirma, turite sukurti naują failą pagrindiniame projekto kataloge su pavadinimu vue.konfigūruoti.js

2 žingsnis: Pridėkite prievado numerį vue.konfigūruoti.js konfigūracijos failas

Sukūrę konfigūracijos failą, atidarykite jį ir pateikite norimą prievado numerį kaip rakto ir vertės porą „devServer“ objektas modulis.eksportas kaip parodyta toliau pateiktame kodo fragmente:

modulis.eksportas =
„devServer“:
uostas: 3000

Tai padarę, išsaugokite programą paspausdami CTRL + S spartieji klavišai ir paleiskite programą.

3 žingsnis: Paleiskite programą

Dabar paleiskite programą naudodami npm bėgimo tarnauti komandą ir nepridėdami jokio prievado numerio.

$ npm bėgimas

Jūs paliudysite, kad prievado numeris 3000 priskirtas sėkmingai, o programa veikia jūsų nurodytu prievado numeriu vue.konfigūruoti.js failą.

Taip galite pakeisti arba nustatyti savo pasirinktą prievado numerį „Vue CLI“ projekte.

Išvada

Šiame įraše buvo išmokti du skirtingi būdai, kaip pakeisti ar nustatyti uosto numerį laikinai ir visam laikui „Vue CLI“ projekte, ir paaiškinta išsamiu ir lengvai suprantamu žingsnis po žingsnio metodu.