Kako spremeniti številko vrat v Vue CLI

Vue.js je robusten in trendovski front-end okvir. Prepoznana je kot kombinacija dveh spektakularnih okvirov, Angular in React, z uporabo predloge sintakse Angular in rekvizitov metode React. Omogoča tradicionalni način HTML in CSS za ustvarjanje komponente, znan pa je po tem, da resnično hitro in enostavno omogoča čelne programe. Vendar se moramo pogosto soočiti z nekaterimi težavami ali težavami ali pa si želimo le drugačne konfiguracije, zato si bomo ogledali scenarij, v katerem moramo spremeniti številko vrat v projektu Vue CLI. Začnimo.

Privzeta številka vrat Vue CLI

Ko zaženete projekt Vue z uporabo npm teči služi ukazom se številka vrat 8080 samodejno dodeli projektu Vue in deluje na tej številki vrat. Med vožnjo Vue.js, terminal prikaže izhodne podatke približno tako:

$ npm run serve

Na zgornjem posnetku zaslona so privzeta dodeljena vrata 8080, kjer projekt teče. V redkih primerih je, če je vrata 8080 zasedena, vrata 8081 dodeljena projektu Vue in tako nadaljuje, dokler ne najde proste številke vrat. Kaj pa, če želite spremeniti in dodeliti drugo številko vrat po lastni izbiri. Poglejmo in se naučimo, kako spremeniti privzeto številko vrat v projektu Vue CLI.

Spremenite privzeto številko vrat Vue CLI

No, privzeto dodeljeno številko vrat Vue lahko spremenite na dva načina.js projekt. Ena je začasna sprememba številke vrat, druga pa trajna sprememba številke vrat. Začnimo torej s prvo metodo spreminjanja številke vrat Vue CLI.

1. način: Začasno spremenite številko vrat
Številko vrat projekta Vue CLI lahko med izvajanjem Vueja enostavno spremenite.js s pomočjo npm teči služi; preprosto morate priložiti - -pristanišče s številko vrat, ki jo želite npm teči služi ukaz, kot je prikazano v spodnjem ukazu:

$ npm run serve - --port 4000

Ko je projekt uspešno preveden, lahko vidite, da se številka vrat spremeni v 4000.

Na zgornjem posnetku zaslona lahko vidite, da se aplikacija izvaja na vratih 4000, vendar so ta vrata začasno dodeljena, dokler se aplikacija ne zažene. Ko zaključite serijo in zaženete projekt, ne da bi pristanišču zagotovili vrata npm teči služi ukaz, potem bodo znova dodeljena privzeta vrata 8080, sicer pa morate vrata dodeliti vsakič, ko zaženete aplikacijo. Na srečo imamo še eno metodo, ki jo ponuja Vue.js, s pomočjo katerega lahko trajno spremenimo številko vrat našega projekta Vue, zato poglejmo, kako trajno spremeniti številko vrat projekta Vue CLI.

2. način: Trajno spremenite številko vrat projekta Vue CLI
Če želite spremeniti privzeto številko vrat vašega Vueja.js trajno. Preprosto sledite spodnjim korakom in vašemu Vueu boste dodelili svojo želeno številko vrat.js projekt.

Korak 1: Ustvari novo vue.konfig.js datoteko v korenskem imeniku

Najprej morate v korenskem imeniku vašega projekta z imenom ustvariti novo datoteko vue.konfig.js

2. korak: Dodajte številko vrat v vue.konfig.js konfiguracijska datoteka

Ko ustvarite konfiguracijsko datoteko, jo odprite in vnesite želeno številko vrat kot par ključ-vrednost znotraj devServer predmet v modul.izvoz kot je prikazano v spodnjem delčku kode:

modul.izvoz =
devServer:
pristanišče: 3000

Ko to storite, shranite aplikacijo s pritiskom na CTRL + S tipke in zaženite aplikacijo.

3. korak: Zaženite aplikacijo

Zdaj zaženite aplikacijo s pomočjo npm teči služi ukaz in brez dodajanja številk vrat.

$ npm run serve

Videli boste, da je številka vrat 3000 dodeljena uspešno in da se aplikacija izvaja na navedeni številki vrat v vue.konfig.js mapa.

Tako lahko spremenite ali nastavite številko vrat po lastni izbiri v projektu Vue CLI.

Zaključek

Ta objava se je naučila dveh različnih načinov za začasno in trajno spreminjanje ali nastavitev številke vrat v projektu Vue CLI in razložila poglobljeno in enostavno razumljivo metodo po korakih.