Hvordan du endrer portnummer i vue cli

Vue.JS er en robust og trendy front-end-rammeverk. Det er anerkjent som kombinasjonen av to spektakulære rammer, kantete og reagerer, ved bruk av templeringssyntaks for vinkel og rekvisitsemetode for React. Det gir den tradisjonelle HTML- og CSS-måten å lage en komponent på, og den er kjent for å gjøre front-end applikasjoner veldig raskt og på en enkel måte. Imidlertid må vi ofte møte noen problemer og problemer eller bare ha noen forskjellige konfigurasjoner, så vi vil se på et scenario der vi trenger å endre portnummeret i Vue CLI -prosjektet. La oss begynne.

Standard portnummer av vue cli

Når du driver et Vue -prosjekt ved hjelp av NPM Run Serve Kommando, portnummer 8080 blir automatisk tildelt Vue -prosjektet, og det kjøres på det portnummeret. Mens du kjører en vue.JS Project, terminalen viser utdataene noe slikt:

$ npm run serverer

I skjermbildet gitt ovenfor er standardporten som er tilordnet 8080, der prosjektet kjører. I et sjeldent scenario, hvis port 8080 er opptatt, er port 8081 tildelt Vue -prosjektet, og det er slik det fortsetter til det finner gratis portnummer. Men hva om du vil endre og tildele et annet portnummer av ditt eget valg. La oss se og lære hvordan du endrer standardportnummeret i Vue CLI -prosjektet.

Endre standardportnummeret til Vue CLI

Vel, det er to måter å endre standard tildelt et portnummer til Vue.JS -prosjekt. Den ene er å endre portnummeret midlertidig, og det andre er å endre portnummeret permanent. Så la oss begynne med den første metoden for å endre portnummeret til Vue CLI.

Metode 1: Endre portnummer midlertidig
Portnummeret til Vue CLI -prosjektet kan enkelt endres mens du kjører Vue.JS -prosjektet ved hjelp av NPM Run Serve; Du må ganske enkelt legge til - -havn med portnummeret ditt ønske om NPM Run Serve Kommando som vist i kommandoen gitt nedenfor:

$ NPM Run Serve - -Port 4000

Når prosjektet er samlet, kan du se at portnummeret blir endret til 4000.

Du kan være vitne til på skjermbildet gitt ovenfor at applikasjonen kjører i Port 4000, Men denne porten tildeles midlertidig til appen kjører. Når du har avsluttet partiet og kjører prosjektet uten å gi porten til NPM Run Serve Kommando, da blir standardport 8080 bli tildelt igjen, eller på annen måte må du tilordne porten hver gang du kjører applikasjonen. Heldigvis har vi en annen metode levert av Vue.JS, ved hjelp av hvilke vi kan endre portnummeret til VUE -prosjektet vårt permanent, så la oss gå foran og se hvordan vi endrer portnummeret til Vue CLI -prosjektet permanent.

Metode 2: Endre portnummer for Vue CLI -prosjekt permanent
Hvis du er interessert i å endre standardportnummeret til Vue.JS -prosjektet permanent. Bare følg trinnene gitt nedenfor, så vil du ha ditt eget ønskede portnummer tildelt Vue.JS -prosjekt.

Trinn 1: Lage en ny vue.konfigurasjon.JS fil på rotkatalogen

Først av alt, må du opprette en ny fil i rotkatalogen til prosjektet ditt med navnet vue.konfigurasjon.JS

Steg 2: Legg til portnummer i vue.konfigurasjon.JS konfigurasjonsfil

Etter å ha opprettet konfigurasjonsfilen, åpner du den og oppgi ønsket portnummer som et nøkkelverdi-par inne i DevServer objekt i modul.Eksport Som vist i kodebiten nedenfor:

modul.eksport =
DevServer:
Port: 3000

Når du har gjort det, lagre applikasjonen ved å trykke på Ctrl + s tastaturnøkler og start applikasjonen.

Trinn3: Kjør søknaden

Start nå applikasjonen med NPM Run Serve kommando og uten å legge til noe portnummer.

$ npm run serverer

Du vil være vitne til at portnummeret 3000 er tildelt vellykket, og applikasjonen kjører på det medfølgende portnummeret i vue.konfigurasjon.JS fil.

Slik kan du endre eller angi portnummer for ditt eget valg i Vue CLI -prosjektet.

Konklusjon

Dette innlegget har lært to forskjellige måter å endre eller sette portnummeret midlertidig og permanent i et Vue CLI-prosjekt og forklart i et dyptgående og lettfattelig trinn-for-trinn-metode.