Como alterar o número da porta na vue cli

Vue.JS é uma estrutura de front-end robusta e moderna. É reconhecido como a combinação de duas estruturas espetaculares, Angular e React, usando a sintaxe de modelos do método angular e de adereços de adereços. Ele fornece a maneira tradicional de HTML e CSS de criar um componente e é conhecido por tornar os aplicativos front-end muito rápido e de uma maneira fácil. No entanto, geralmente precisamos enfrentar alguns problemas e problemas ou apenas queremos uma configuração diferente, por isso vamos dar uma olhada em um cenário em que precisamos alterar o número da porta no projeto Vue CLI. Vamos começar.

Número da porta padrão de Vue CLI

Quando você executa um projeto Vue usando o NPM RUN SERVE Comando, o número da porta 8080 é atribuído automaticamente ao projeto VUE e é executado nesse número da porta. Enquanto executava um vue.Projeto JS, o terminal mostra a saída algo assim:

$ NPM Run Service

Na captura de tela fornecida acima, a porta padrão atribuída é 8080, onde o projeto está sendo executado. Em um cenário raro, se a porta 8080 estiver ocupada, a porta 8081 será atribuída ao projeto Vue, e é assim que continua até encontrar o número da porta gratuita. Mas e se você quiser mudar e atribuir algum outro número de porta de sua própria escolha. Vamos ver e aprender a alterar o número da porta padrão no projeto Vue CLI.

Altere o número de porta padrão de vue cli

Bem, existem duas maneiras de alterar o padrão atribuído um número de porta ao vue.Projeto JS. Um é alterar o número da porta temporariamente, e o segundo é alterar permanentemente o número da porta. Então, vamos começar com o primeiro método de alterar o número da porta de vue cli.

Método 1: Altere o número da porta temporariamente
O número da porta do projeto Vue CLI pode ser facilmente alterado durante a execução do vue.Projeto JS usando o NPM RUN SERVE; você simplesmente tem que anexar - -porta com o número da porta do seu desejo para o NPM RUN SERVE comando como mostrado no comando dado abaixo:

$ NPM RUN SERVIÇÃO ---PORT 4000

Agora, quando o projeto é compilado com sucesso, você pode ver que o número da porta é alterado para 4000.

Você pode testemunhar na captura de tela acima de que o aplicativo está em execução na porta 4000, Mas esta porta é atribuída temporariamente até que o aplicativo esteja em execução. Depois de encerrar o lote e executar o projeto sem fornecer a porta para o NPM RUN SERVE Comando, então a porta padrão 8080 será atribuída novamente ou não, você deve atribuir a porta toda vez que executar o aplicativo. Felizmente, temos outro método fornecido por Vue.JS, usando o qual podemos alterar permanentemente o número da porta do nosso projeto Vue, então vamos em frente e ver como alterar o número da porta do projeto Vue CLI permanentemente.

Método 2: Alterar o número da porta do projeto Vue CLI permanentemente
Se você estiver interessado em alterar o número de porta padrão do seu vue.Projeto JS permanentemente. Basta seguir as etapas abaixo, e você terá o seu número de porta desejado atribuído ao seu vue.Projeto JS.

Passo 1: Crie um novo Vue.Config.JS arquivo no diretório raiz

Primeiro de tudo, você precisa criar um novo arquivo no diretório raiz do seu projeto com o nome Vue.Config.JS

Passo 2: Adicione o número da porta no Vue.Config.JS arquivo de configuração

Depois de criar o arquivo de configuração, abra-o e forneça o número da porta desejado como um par de valores-chave dentro do DevServer objeto no módulo.exportações Conforme mostrado no trecho de código abaixo:

módulo.exports =
DevServer:
Porta: 3000

Depois de fazer isso, salve o aplicativo pressionando Ctrl + s teclas de atalho do teclado e inicie o aplicativo.

Etapa 3: Execute o aplicativo

Agora, inicie o aplicativo usando o NPM RUN SERVE comando e sem anexar nenhum número da porta.

$ NPM Run Service

Você testemunhará que o número da porta 3000 é atribuído com sucesso e o aplicativo está em execução no número da porta fornecida no Vue.Config.JS arquivo.

É assim que você pode alterar ou definir o número da porta de sua própria escolha no projeto Vue CLI.

Conclusão

Esta postagem aprendeu duas maneiras diferentes de mudar ou definir o número da porta temporária e permanentemente em um projeto da CLI VUE e explicou em um método profundo e fácil de entender passo a passo.