Vue

Poortnummer wijzigen in Vue CLI

Poortnummer wijzigen in Vue CLI
Vue.js is een robuust en trendy front-end framework. Het wordt erkend als de combinatie van twee spectaculaire frameworks, Angular en React, met behulp van de sjabloonsyntaxis van Angular en de props-methode van React. Het biedt de traditionele HTML- en CSS-manier om een ​​component te maken, en het staat bekend om het snel en gemakkelijk maken van front-end-applicaties. We hebben echter vaak te maken met enkele problemen en problemen of willen gewoon een andere configuratie, dus we zullen een scenario bekijken waarin we het poortnummer in het Vue CLI-project moeten wijzigen. Laten we beginnen.

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:

$ npm run serve -- --poort 4000

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.

Middelste muisknop werkt niet in Windows 10
De middelste muis knop helpt u door lange webpagina's en schermen met veel gegevens te bladeren. Als dat stopt, zul je uiteindelijk het toetsenbord ge...
Hoe de linker- en rechtermuisknop op Windows 10 pc te veranderen
Het is nogal een norm dat alle computermuisapparaten ergonomisch zijn ontworpen voor rechtshandige gebruikers. Maar er zijn muisapparaten beschikbaar ...
Emuleer muisklikken door te zweven met Clickless Mouse in Windows 10
Het gebruik van een muis of toetsenbord in de verkeerde houding of overmatig gebruik kan leiden tot veel gezondheidsproblemen, waaronder spanning, car...