Standaard poortnummer van Vue CLI
Wanneer u een Vue-project uitvoert met de npm run serveren commando, wordt het poortnummer 8080 automatisch toegewezen aan het Vue-project en wordt het op dat poortnummer uitgevoerd. Tijdens het uitvoeren van een Vue.js-project, toont de terminal de uitvoer ongeveer als volgt:
$ npm run serveren
In de bovenstaande schermafbeelding is de standaard toegewezen poort: 8080, waar het project loopt. In een zeldzaam scenario, als poort 8080 bezet is, wordt poort 8081 toegewezen aan het Vue-project, en zo gaat het door totdat het het vrije poortnummer vindt. Maar wat als u een ander poortnummer naar eigen keuze wilt wijzigen en toewijzen?. Laten we eens kijken en leren hoe we het standaardpoortnummer in het Vue CLI-project kunnen wijzigen.
Wijzig het standaardpoortnummer van Vue CLI
Welnu, er zijn twee manieren om de standaard toegewezen poortnummer aan de Vue . te wijzigen.js-project. Een daarvan is om het poortnummer tijdelijk te wijzigen, en de tweede is om het poortnummer permanent te wijzigen. Laten we dus beginnen met de eerste methode om het poortnummer van Vue CLI te wijzigen.
Methode 1: Poortnummer tijdelijk wijzigen
Het poortnummer van het Vue CLI-project kan eenvoudig worden gewijzigd tijdens het uitvoeren van de Vue.js-project met behulp van de npm run serveren; je hoeft alleen maar toe te voegen - -haven met het poortnummer van uw wens naar de npm run serveren commando zoals weergegeven in het onderstaande commando:
Als het project nu succesvol is gecompileerd, kunt u zien dat het poortnummer is gewijzigd in 4000.
U kunt in de bovenstaande schermafbeelding zien dat de toepassing in de haven draait 4000, maar deze poort is tijdelijk toegewezen totdat de app draait. Zodra u de batch beëindigt en het project uitvoert zonder de poort aan de npm run serveren commando, dan wordt de standaardpoort 8080 opnieuw toegewezen, of anders moet u de poort elke keer dat u de toepassing uitvoert, toewijzen. Gelukkig hebben we een andere methode van Vue.js, waarmee we het poortnummer van ons Vue-project permanent kunnen wijzigen, dus laten we doorgaan en kijken hoe we het poortnummer van het Vue CLI-project permanent kunnen wijzigen.
Methode 2: Wijzig het poortnummer van het Vue CLI-project permanent
Als u geïnteresseerd bent in het wijzigen van het standaardpoortnummer van uw Vue.js-project permanent. Volg gewoon de onderstaande stappen en u krijgt uw eigen gewenste poortnummer toegewezen aan uw Vue.js-project.
Stap 1: Maak een nieuwe vue.configuratie.js bestand in de hoofdmap
Allereerst moet u een nieuw bestand maken in de hoofdmap van uw project met de naam zien.configuratie.js
Stap 2: Poortnummer toevoegen in de zien.configuratie.js configuratiebestand
Nadat u het configuratiebestand hebt gemaakt, opent u het en geeft u het gewenste poortnummer op als een sleutel-waardepaar in de devServer object in de module.exporteert zoals weergegeven in het onderstaande codefragment:
module.export =devServer:
poort: 3000
Als je dat hebt gedaan, sla je de applicatie op door op te drukken CTRL + S sneltoetsen op het toetsenbord en start de applicatie.
Stap 3: Voer de applicatie uit
Start nu de applicatie met de npm run serveren commando en zonder een poortnummer toe te voegen.
$ npm run serveren
U zult zien dat het poortnummer 3000 succesvol is toegewezen en dat de applicatie draait op het door u opgegeven poortnummer in de zien.configuratie.js het dossier.
Zo kunt u het poortnummer van uw eigen keuze wijzigen of instellen in het Vue CLI-project.
Conclusie
Dit bericht heeft twee verschillende manieren geleerd om het poortnummer tijdelijk en permanent in een Vue CLI-project te wijzigen of in te stellen en uitgelegd in een diepgaande en gemakkelijk te begrijpen stapsgewijze methode.