Standardportnummer for Vue CLI
Når du kører et Vue-projekt ved hjælp af npm køre tjene kommando, tildeles portnummer 8080 automatisk til Vue-projektet, og det kører på det portnummer. Mens du kører en Vue.js projekt, terminalen viser output noget som dette:
$ npm køre tjene
I skærmbilledet ovenfor er den tildelte standardport 8080, hvor projektet kører. I et sjældent scenarie, hvis port 8080 er optaget, tildeles port 8081 Vue-projektet, og det er sådan, det fortsætter, indtil det finder det gratis portnummer. Men hvad nu hvis du vil ændre og tildele et andet portnummer efter eget valg. Lad os se og lære, hvordan du ændrer standardportnummeret i Vue CLI-projektet.
Skift standardportnummer for Vue CLI
Der er to måder at ændre standard tildelt et portnummer til Vue.js projekt. Den ene er at ændre portnummeret midlertidigt, og den anden er at ændre portnummeret permanent. Så lad os begynde med den første metode til at ændre portnummeret på Vue CLI.
Metode 1: Skift portnummer midlertidigt
Portnummeret på Vue CLI-projektet kan let ændres, mens Vue køres.js-projekt ved hjælp af npm køre tjene; du skal bare tilføje - -Havn med portnummeret på dit ønske til npm køre tjene kommando som vist i kommandoen nedenfor:
Når projektet nu er kompileret med succes, kan du se, at portnummeret ændres til 4000.
Du kan se i skærmbilledet ovenfor, at applikationen kører i havn 4000, men denne port tildeles midlertidigt, indtil appen kører. Når du afslutter batchen og kører projektet uden at give porten til npm køre tjene kommandoen, så tildeles standardport 8080 igen, eller på anden måde skal du tildele porten hver gang du kører applikationen. Heldigvis har vi en anden metode leveret af Vue.js, ved hjælp af hvilke vi permanent kan ændre portnummeret på vores Vue-projekt, så lad os gå videre og se, hvordan vi ændrer portnummeret på Vue CLI-projektet permanent.
Metode 2: Skift portnummer for Vue CLI-projekt permanent
Hvis du er interesseret i at ændre standardportnummeret på din Vue.js projekt permanent. Følg blot trinene nedenfor, så får du dit eget ønskede portnummer tildelt din Vue.js projekt.
Trin 1: Opret en ny visning.config.js fil i rodmappen
Først og fremmest skal du oprette en ny fil i rodmappen til dit projekt med navnet visning.config.js
Trin 2: Tilføj portnummer i visning.config.js konfigurationsfil
Når du har oprettet konfigurationsfilen, skal du åbne den og angive det ønskede portnummer som et nøgleværdipar inden i devServer objekt i modul.eksport som vist i kodestykket nedenfor:
modul.eksport =devServer:
havn: 3000
Når du har gjort det, skal du gemme applikationen ved at trykke på CTRL + S tastaturgenvejstaster og start applikationen.
Trin 3: Kør applikationen
Start nu applikationen ved hjælp af npm køre tjene kommando og uden at tilføje noget portnummer.
$ npm køre tjene
Du vil være vidne til, at portnummeret 3000 er tildelt med succes, og at applikationen kører på dit angivne portnummer i visning.config.js fil.
Sådan kan du ændre eller indstille det portnummer, du selv vælger i Vue CLI-projektet.
Konklusion
Dette indlæg har lært to forskellige måder at ændre eller indstille portnummeret midlertidigt og permanent i et Vue CLI-projekt og forklaret på en dyb og letforståelig trin-for-trin metode.