Hvordan endre portnummer i Vue CLI

Vue.js er et robust og trendy frontend-rammeverk. Det er anerkjent som en kombinasjon av to spektakulære rammer, Angular og React, ved å bruke mal-syntaksen til Angular og rekvisita-metoden til 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 ønsker en annen konfigurasjon, så vi vil se på et scenario der vi trenger å endre portnummeret i Vue CLI-prosjektet. La oss begynne.

Standard portnummer for Vue CLI

Når du kjører et Vue-prosjekt ved hjelp av npm run serve kommando, tildeles portnummer 8080 automatisk til Vue-prosjektet, og det kjører på det portnummeret. Mens du kjører en Vue.js prosjekt, viser terminalen utgangen noe slikt:

$ npm run serve

I skjermbildet gitt ovenfor er standardporten tildelt 8080, hvor prosjektet er i gang. I et sjeldent scenario, hvis port 8080 er opptatt, tildeles port 8081 Vue-prosjektet, og dette fortsetter til den finner ledig portnummer. Men hva om du vil endre og tildele et annet portnummer etter eget valg. La oss se og lære hvordan du endrer standard portnummer i Vue CLI-prosjektet.

Endre standard portnummer for Vue CLI

Det er to måter å endre standard tildelt et portnummer til Vue.js prosjekt. Det 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 prosjekt ved hjelp av npm run serve; du må bare legge til - -havn med portnummeret du ønsker å npm run serve kommando som vist i kommandoen gitt nedenfor:

$ npm run serve - --port 4000

Nå, når prosjektet er satt sammen vellykket, kan du se at portnummeret endres til 4000.

Du kan se på skjermbildet som er gitt ovenfor at applikasjonen kjører i havn 4000, men denne porten tildeles midlertidig til appen kjører. Når du avslutter batchen og kjører prosjektet uten å gi porten til npm run serve kommandoen, vil standardport 8080 tildeles 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, som vi kan endre portnummeret til Vue-prosjektet vårt permanent, så la oss gå videre og se hvordan du endrer portnummeret til Vue CLI-prosjektet permanent.

Metode 2: Endre portnummer på Vue CLI-prosjekt permanent
Hvis du er interessert i å endre standard portnummer på Vue.js prosjekt permanent. Bare følg trinnene nedenfor, så får du ditt eget ønskede portnummer tildelt Vue.js prosjekt.

Trinn 1: Lage en ny utsikt.config.js filen i rotkatalogen

Først og fremst må du opprette en ny fil i rotkatalogen til prosjektet ditt med navnet utsikt.config.js

Steg 2: Legg til portnummer i utsikt.config.js konfigurasjonsfil

Etter at du har opprettet konfigurasjonsfilen, åpner du den og oppgir ønsket portnummer som et nøkkelverdipar i devServer objekt i modul.eksport som vist i kodebiten nedenfor:

modul.eksport =
devServer:
port: 3000

Når du har gjort det, lagrer du programmet ved å trykke på CTRL + S hurtigtaster og start applikasjonen.

Steg 3: Kjør applikasjonen

Start applikasjonen nå med npm run serve kommando og uten å legge til noe portnummer.

$ npm kjør servering

Du vil være vitne til at portnummer 3000 er tilordnet, og at applikasjonen kjører på det oppgitte portnummeret ditt i utsikt.config.js fil.

Slik kan du endre eller angi portnummeret du selv velger i Vue CLI-prosjektet.

Konklusjon

Dette innlegget har lært to forskjellige måter å endre eller angi portnummeret midlertidig og permanent i et Vue CLI-prosjekt, og forklart i en dyp og enkel å forstå trinnvis metode.