Come modificare il numero di porta in vue cli

Vue.JS è un quadro front-end robusto e alla moda. È riconosciuto come la combinazione di due framework spettacolari, angolari e reatti, usando la sintassi del modello del metodo angolare e oggetto. Fornisce il modo tradizionale HTML e CSS per creare un componente ed è noto per rendere le applicazioni front-end davvero veloci e in modo semplice. Tuttavia, spesso dobbiamo affrontare alcuni problemi e problemi o vogliamo semplicemente una configurazione diversa, quindi daremo un'occhiata a uno scenario in cui dobbiamo cambiare il numero di porta nel progetto VUE CLI. Iniziamo.

Numero di porta predefinito di Vue CLI

Quando si esegue un progetto VUE utilizzando il NPM Run Serve comando, il numero di porta 8080 viene automaticamente assegnato al progetto VUE e funziona su quel numero di porta. Mentre si esegue un Vue.Progetto JS, il terminale mostra l'output qualcosa di simile:

$ npm run serve

Nello screenshot sopra indicato, la porta predefinita assegnata è 8080, Dove è in esecuzione il progetto. In uno scenario raro, se la porta 8080 è occupata, la porta 8081 è assegnata al progetto VUE, ed è così che continua fino a quando non trova il numero di porta gratuito. Ma cosa succede se vuoi cambiare e assegnare un altro numero di porta a tua scelta. Vediamo e impariamo come modificare il numero di porta predefinito nel progetto Vue CLI.

Modifica il numero di porta predefinito di Vue CLI

Bene, ci sono due modi per modificare il numero di porta predefinito assegnato alla VUE.Progetto JS. Uno è modificare temporaneamente il numero di porta e il secondo è quello di modificare permanentemente il numero di porta. Quindi, iniziamo con il primo metodo per modificare il numero di porta di Vue CLI.

Metodo 1: Modifica temporaneamente il numero della porta
Il numero di porta del progetto VUE CLI può essere facilmente modificato durante l'esecuzione della VUE.Progetto JS usando il NPM Run Serve; devi semplicemente aggiungere - -porta con il numero di porta del tuo desiderio a NPM Run Serve comando come mostrato nel comando indicato di seguito:

$ npm run serve ---port 4000

Ora, quando il progetto viene compilato correttamente, puoi vedere che il numero di porta viene modificato 4000.

Puoi testimoniare nello screenshot sopra indicato che l'applicazione è in esecuzione alla porta 4000, Ma questa porta viene assegnata temporaneamente fino a quando l'app non è in esecuzione. Una volta terminato il batch ed esegui il progetto senza fornire la porta al NPM Run Serve Comando, quindi la porta predefinita 8080 verrà nuovamente assegnata o, in altro modo, è necessario assegnare la porta ogni volta che si esegue l'applicazione. Fortunatamente, abbiamo un altro metodo fornito da Vue.JS, usando il quale possiamo modificare permanentemente il numero di porta del nostro progetto VUE, quindi andiamo avanti e vediamo come modificare il numero di porta del progetto VUE CLI in modo permanente.

Metodo 2: Modifica il numero di porta del progetto VUE CLI permanentemente
Se sei interessato a modificare il numero di porta predefinito della tua Vue.Progetto JS permanentemente. Segui semplicemente i passaggi indicati di seguito e avrai il tuo numero di porta desiderato assegnato al tuo Vue.Progetto JS.

Passo 1: Crea un nuovo Vue.configurazione.js File nella directory di root

Prima di tutto, devi creare un nuovo file nella directory principale del tuo progetto con il nome Vue.configurazione.js

Passo 2: Aggiungi il numero di porta in Vue.configurazione.js file di configurazione

Dopo aver creato il file di configurazione, aprilo e fornisci il numero di porta desiderato come coppia di valore chiave all'interno del Devserver oggetto nel modulo.esportazioni Come mostrato nello snippet di codice di seguito:

modulo.Exports =
devserver:
Porta: 3000

Una volta fatto questo, salva l'applicazione premendo Ctrl + s tasti di scelta rapida della tastiera e avviare l'applicazione.

Passaggio3: Esegui l'applicazione

Ora, avviare l'applicazione utilizzando il NPM Run Serve comando e senza aggiungere alcun numero di porta.

$ npm run serve

Testimonierai che il numero di porta 3000 è assegnato correttamente e l'applicazione è in esecuzione sul numero di porta fornito nel Vue.configurazione.js file.

Ecco come è possibile modificare o impostare il numero di porta della tua scelta nel progetto VUE CLI.

Conclusione

Questo post ha imparato due modi diversi per cambiare o impostare il numero di porta temporaneamente e permanentemente in un progetto VUE CLI e spiegato in un metodo profondo e facile da capire.