Kā mainīt porta numuru Vue CLI

Vue.js ir izturīgs un moderns front-end ietvars. Tas tiek atzīts par divu iespaidīgu ietvaru - Angular un React - kombināciju, izmantojot React veidņu sintakses un rekvizītu metodi. Tas nodrošina tradicionālo HTML un CSS veidu, kā izveidot komponentu, un tas ir pazīstams ar to, ka priekšgala lietojumprogrammas padara patiešām ātras un vienkāršas. Tomēr mums bieži nākas saskarties ar dažām problēmām un problēmām vai vienkārši vēlaties kādu citu konfigurāciju, tāpēc mēs apskatīsim scenāriju, kurā Vue CLI projektā jāmaina porta numurs. Sāksim.

Noklusējuma Vue CLI porta numurs

Palaižot Vue projektu, izmantojot npm palaist servi komandu, porta numurs 8080 tiek automātiski piešķirts Vue projektam, un tas darbojas ar šo porta numuru. Skrienot Vue.js projekts, terminālis parāda izvadi apmēram šādi:

$ npm palaist

Iepriekš dotajā ekrānuzņēmumā noklusējuma piešķirtais ports ir 8080, kur notiek projekts. Retos gadījumos, ja ports 8080 ir aizņemts, ports 8081 tiek piešķirts projektam Vue, un tas turpinās, līdz tiek atrasts brīvās ostas numurs. Bet ko darīt, ja vēlaties mainīt un piešķirt citu ostas numuru pēc savas izvēles. Apskatīsim un uzzināsim, kā mainīt noklusējuma porta numuru Vue CLI projektā.

Mainiet Vue CLI noklusējuma porta numuru

Nu, ir divi veidi, kā mainīt noklusējuma piešķirto porta numuru Vue.js projekts. Viens no tiem ir īslaicīgi mainīt porta numuru, bet otrs ir neatgriezeniski mainīt porta numuru. Tātad, sāksim ar pirmo Vue CLI porta numura maiņas metodi.

1. metode: pagaidām mainiet porta numuru
Vue CLI projekta porta numuru var viegli mainīt, palaižot Vue.js projekts, izmantojot npm palaist servi; jums vienkārši jāpievieno - -osta ar jūsu vēlmes ostas numuru npm palaist servi komandu, kā parādīts zemāk dotajā komandā:

$ npm skrējiens - - 4000

Tagad, kad projekts ir veiksmīgi sastādīts, jūs varat redzēt, ka porta numurs ir mainīts uz 4000.

Iepriekš redzamajā ekrānuzņēmumā varat liecināt, ka lietojumprogramma darbojas ostā 4000, bet šī osta tiek piešķirta uz laiku, līdz darbojas lietotne. Kad pārtraucat sēriju un palaidāt projektu, nenodrošinot portu npm palaist servi komandu, tad atkal tiks piešķirts noklusējuma ports 8080, pretējā gadījumā ports jāpiešķir katru reizi, kad palaižat lietojumprogrammu. Par laimi mums ir vēl viena metode, ko nodrošina Vue.js, izmantojot kuru mēs varam neatgriezeniski mainīt mūsu Vue projekta porta numuru, tāpēc turpināsim un redzēsim, kā pastāvīgi mainīt Vue CLI projekta porta numuru.

2. metode: neatgriezeniski mainiet Vue CLI projekta porta numuru
Ja jūs interesē mainīt Vue noklusējuma porta numuru.js projekts pastāvīgi. Vienkārši izpildiet tālāk norādītās darbības, un jūsu Vue tiks piešķirts jūsu vēlamais porta numurs.js projekts.

1. darbība: Izveidojiet jaunu vue.konfigurēt.js failu saknes direktorijā

Pirmkārt, projekta saknes direktorijā jāizveido jauns fails ar nosaukumu vue.konfigurēt.js

2. darbība: Pievienojiet ostas numuru vue.konfigurēt.js konfigurācijas fails

Pēc konfigurācijas faila izveidošanas atveriet to un norādiet vēlamo porta numuru kā atslēgas un vērtību pāri iekšpusē devServer objekts modulis.eksports kā parādīts zemāk esošajā koda fragmentā:

modulis.eksports =
devServer:
osta: 3000

Kad tas ir izdarīts, saglabājiet programmu, nospiežot CTRL + S īsinājumtaustiņus un palaidiet programmu.

3. solis: Palaidiet lietojumprogrammu

Sāciet lietojumprogrammu, izmantojot npm palaist servi komandu un nepievienojot nevienu porta numuru.

$ npm palaist

Jūs būsiet liecinieks tam, ka porta numurs 3000 ir veiksmīgi piešķirts un programma darbojas ar jūsu norādīto porta numuru vue.konfigurēt.js failu.

Šādi Vue CLI projektā varat mainīt vai iestatīt paša izvēlēto porta numuru.

Secinājums

Šis ziņojums ir iemācījies divus dažādus veidus, kā mainīt vai iestatīt porta numuru uz laiku un neatgriezeniski Vue CLI projektā, un izskaidrots dziļā un viegli saprotamā soli pa solim.