Kuidas muuta pordinumbrit Vue CLI-s

Vue.js on kindel ja trendikas esiotsa raamistik. Seda tunnustatakse kahe suurejoonelise raamistiku - Angular ja React - kombinatsioonina, kasutades nurga ja rekvisiidi mallisüntaksit. See pakub traditsioonilist HTML-i ja CSS-i viisi komponendi loomiseks ning see on tuntud selle poolest, et esiotsa rakendused muudavad tõeliselt kiire ja lihtsa viisi. Siiski peame sageli silmitsi seisma mõne probleemi ja probleemiga või tahame lihtsalt erinevat konfiguratsiooni, nii et vaatame stsenaariumi, kus peame Vue CLI projektis muutma pordi numbrit. Alustame.

Vue CLI vaikepordi number

Kui käivitate Vue projekti kasutades npm jooksu serveerimine käsuga määratakse Vue projektile automaatselt pordi number 8080 ja see töötab sellel pordi numbril. Vue juhtimise ajal.js projekti korral näitab terminal väljundit umbes nii:

$ npm jooksu teenimine

Ülaltoodud ekraanipildil on määratud vaikeport 8080, kus projekt töötab. Haruldase stsenaariumi korral määratakse port 8080 Vue projektile, kui port 8080 on hõivatud, ja nii jätkub see seni, kuni leiab vaba pordi numbri. Aga mis siis, kui soovite muuta ja omistada mõne muu enda valitud pordinumbri. Vaatame ja õpime, kuidas muuta vaikepordi numbrit Vue CLI-projektis.

Muutke Vue CLI vaikepordi numbrit

Nuppu, vaikimisi määratud pordinumbri muutmiseks Vue-le on kaks võimalust.js projekt. Üks on ajutiselt muuta pordinumbrit ja teine ​​pordi numbri jäädavaks muutmiseks. Alustame Vue CLI pordi numbri muutmise esimese meetodiga.

1. meetod: pordi numbri ajutine muutmine
Vue CLI projekti pordi numbrit saab Vue käitamise ajal hõlpsasti muuta.js projekti kasutades npm jooksu serveerimine; peate lihtsalt lisama - -sadam pordi numbriga, mida soovite npm jooksu serveerimine käsk, nagu on näidatud allpool antud käsus:

$ npm jooksu teenimine - --port 4000

Nüüd, kui projekt on edukalt kompileeritud, näete, et pordi number on muudetud 4000.

Ülaltoodud ekraanipildil näete, et rakendus töötab sadamas 4000, kuid see port määratakse ajutiselt, kuni rakendus töötab. Kui olete partii lõpetanud ja projekti käivitanud, ilma et pakuks porti npm jooksu serveerimine käsk, siis määratakse vaikeport 8080 uuesti või muul juhul peate pordi määrama iga kord, kui rakendust käivitate. Õnneks on meil Vue pakutud veel üks meetod.js, mille abil saame oma Vue projekti pordinumbrit jäädavalt muuta, nii et jätkame ja vaatame, kuidas muuta Vue CLI projekti pordi numbrit jäädavalt.

2. meetod: muutke Vue CLI projekti pordi numbrit jäädavalt
Kui olete huvitatud oma Vue vaikepordi numbri muutmisest.js projekt jäädavalt. Järgige lihtsalt allpool toodud samme ja teie Vue-le määratakse teie soovitud pordi number.js projekt.

Samm 1: Looge uus vue.konfig.js fail juurkataloogis

Kõigepealt peate oma projekti juurkataloogis looma uue faili nimega vue.konfig.js

2. samm: Lisage pordi number vue.konfig.js konfiguratsioonifail

Pärast konfiguratsioonifaili loomist avage see ja sisestage soovitud pordinumber võtme-väärtuste paarina devServer objekt moodul.eksport nagu näidatud allolevas koodijupis:

moodul.eksport =
devServer:
sadam: 3000

Kui olete selle teinud, salvestage rakendus vajutades CTRL + S kiirklahvid ja käivitage rakendus.

3. samm: Käivitage rakendus

Nüüd käivitage rakendus, kasutades npm jooksu serveerimine ja ilma ühtegi pordinumbrit lisamata.

$ npm jooksu teenimine

Tunnistate, et pordi number 3000 on edukalt määratud ja rakendus töötab teie pakutavas pordi numbris vue.konfig.js faili.

Nii saate Vue CLI projektis oma valitud pordinumbrit muuta või määrata.

Järeldus

See postitus on õppinud kahte erinevat viisi pordinumbri ajutiseks ja püsivaks muutmiseks või määramiseks Vue CLI-projektis ning seda on põhjalikult ja hõlpsasti mõistetav samm-sammult selgitatud.