Como alterar o número da porta no projeto vue-cli

Respostas:

20

A porta para o modelo Vue-cli webpack é encontrada na raiz do seu aplicativo myApp/config/index.js .

Tudo que você precisa fazer é modificar o portvalor dentro do devbloco:

 dev: {
    proxyTable: {},
    env: require('./dev.env'),
    port: 4545,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    cssSourceMap: false
  }

Agora você pode acessar seu aplicativo com localhost:4545

também se você tiver o .envarquivo é melhor configurá-lo a partir daí

samayo
fonte
18
Na última versão do vuejs. O arquivo não é mais usado, em vez de usar: <your_project_root> /vue.config.js.
Jianwu Chen
3
O arquivo myApp/config/index.jsnão existe!
exhuma
3
O Vue CLI 3 usa vue.config.js na raiz do projeto. Tem que ser criado manualmente IIRC.
Ege Ersoz,
1
não há vue.config.js lá
Geomorillo
19
"scripts": { "serve": "vue-cli-service serve --port 80" },
Sudhir K Gupta
124

Se você estiver usando vue-cli3.x, pode simplesmente passar a porta para o npmcomando da seguinte maneira:

npm run serve -- --port 3000

Então visite http://localhost:3000/

Nick Litwin
fonte
7
Você me economizou um tempo precioso, pois o primeiro --não está escrito no documento: cli.vuejs.org/guide/cli-service.html#using-the-binary . Estava a escrever, o npm run serve --port 3000que me parece lógico, mas tenho erros ... Perfeito!
toni07
3
Isso ocorre porque o primeiro --escapa dos parâmetros fornecidos para npm run servee não para vue-cli-service. Se você editar o package.jsone o servecomando diretamente, insira-o conforme mostrado na documentação:"serve": "vue-cli-service serve --port 3000",
MatsLindh
93

Atrasado para a festa, mas acho útil consolidar todas essas respostas em uma, destacando todas as opções.

Separado no Vue CLI v2 (modelo do webpack) e no Vue CLI v3, ordenado por precedência (alto para baixo).

Vue CLI v3

  • package.json: Adicionar opção de porta para serve script:scripts.serve=vue-cli-service serve --port 4000
  • Opção CLI --portpara npm run serve, por exemplo npm run serve -- --port 3000. Observe que --isso faz com que a opção de porta seja passada para o script npm em vez de para o próprio npm. Desde pelo menos a v3.4.1, deve ser, por exemplo,vue-cli-service serve --port 3000 .
  • Variável de ambiente $PORT, por exemploPORT=3000 npm run serve
  • .env Arquivos, envs mais específicos substituem outros menos específicos, por exemplo PORT=3242
  • vue.config.js, devServer.port, Por exemplo,devServer: { port: 9999 }

Referências:

Vue CLI v2 (obsoleto)

  • Variável de ambiente $PORT, por exemploPORT=3000 npm run dev
  • /config/index.js: dev.port

Referências:

wwerner
fonte
3
Parece que este mudou um pouco no último cli vue (usando 3.4.1), aqui está a minha linha de "servir" em package.json: "serve": "vue-cli-service serve --port 4000",. Funciona bem!
RoccoB de
@RoccoB Obrigado, verifiquei e adicionei à resposta.
wwerner
As respostas acima não parecem funcionar na v3 no momento. Tentei a opção .env, package.json, vue.config.js e a opção de comando CLI, mas todos foram ignorados. Os documentos de arquivo de configuração dizer "Alguns valores gosto host, porte httpspodem ser substituídos por sinalizadores de linha de comando." cli.vuejs.org/config/#devserver Estou faltando alguma coisa? Alguém mais está tendo problemas?
Ryan
2
@Ryan - Isso foi relatado ontem no VueJS CLI Repository Issues: github.com/vuejs/vue-cli/issues/4452 Ele está dizendo para instalar o portfinder ( github.com/http-party/node-portfinder ), pois havia um quebra de mudança que aconteceu com isso.
Angelo
38

No momento em que esta resposta foi escrita (5 de maio de 2018), vue-clisua configuração está hospedada em <your_project_root>/vue.config.js. Para mudar a porta, veja abaixo:

// vue.config.js
module.exports = {
  // ...
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080, // CHANGE YOUR PORT HERE!
    https: false,
    hotOnly: false,
  },
  // ...
}

A vue.config.jsreferência completa pode ser encontrada aqui: https://cli.vuejs.org/config/#global-cli-config

Observe que, conforme declarado nos documentos, “Todas as opções para webpack-dev-server” ( https://webpack.js.org/configuration/dev-server/ ) estão disponíveis na devServerseção.

TomyJaya
fonte
1
@srf: Resposta editada. Obrigado por apontar o link quebrado.
TomyJaya
Deve ter sido um \. efeito naquele site :)
estraga
13

Outra opção se você estiver usando o vue cli 3 é usar um arquivo de configuração. Faça um vue.config.jsno mesmo nível que o seu package.jsone coloque uma configuração como esta:

module.exports = {
  devServer: {
    port: 3000
  }
}

Configurando com o script:

npm run serve --port 3000

funciona muito bem, mas se você tiver mais opções de configuração, gosto de fazê-lo em um arquivo de configuração. Você pode encontrar mais informações nos documentos .

derFBeste
fonte
1
Eu gosto dessa resposta, pois mostra que vue.config.js pode ser usado apenas para alterar a porta e deixar tudo como está, o que foi perguntado originalmente.
Twisted
9

A melhor maneira é atualizar o comando serve script em seu package.jsonarquivo. Basta anexar --port 3000assim:

"scripts": {
  "serve": "vue-cli-service serve --port 3000",
  "build": "vue-cli-service build",
  "inspect": "vue-cli-service inspect",
  "lint": "vue-cli-service lint"
},
Julien Le Coupanec
fonte
8

No webpack.config.js:

module.exports = {
  ......
  devServer: {
    historyApiFallback: true,
    port: 8081,   // you can change the port there
    noInfo: true,
    overlay: true
  },
  ......
}

Você pode alterar a porta no module.exports-> devServer->port .

Então você reencontra o npm run dev. Você pode conseguir isso.

aeronave
fonte
8

Se você deseja alterar a porta localhost, você pode alterar a tag de scripts em package.json :

 "scripts": {
    "serve": "vue-cli-service serve --port 3000",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
Fatih Başar
fonte
Muito obrigado :-)
Adam Orlov
5

Uma abordagem alternativa com a vue-cliversão 3 é adicionar um .envarquivo no diretório raiz do projeto (ao lado package.json) com o conteúdo:

PORT=3000

Em execução npm run serveagora indicará que o aplicativo está sendo executado na porta 3000.

Chris Dickson
fonte
4

Há muitas respostas aqui variando de acordo com a versão, então pensei em confirmar e expor a resposta de Julien Le Coupanec acima de outubro de 2018 ao usar a CLI do Vue . Na versão mais recente do Vue.js a partir desta postagem - [email protected] - as etapas descritas abaixo fizeram mais sentido para mim, depois de examinar algumas das inúmeras respostas neste post. A documentação do Vue.js faz referência a peças desse quebra-cabeça, mas não é tão explícita.

  1. Abra o package.jsonarquivo no diretório raiz do projeto Vue.js.
  2. Procure por "porta" no package.jsonarquivo.
  3. Ao encontrar a seguinte referência a "porta", edite o serveelemento de script para refletir a porta desejada, usando a mesma sintaxe mostrada abaixo:

    "scripts": {
      "serve": "vue-cli-service serve --port 8000",
      "build": "vue-cli-service build",
      "lint": "vue-cli-service lint"
    }
    
  4. Certifique-se de reiniciar o npmservidor para evitar insanidade desnecessária.

Os shows de documentação que se pode efetivamente obter o mesmo resultado adicionando --port 8080ao final do npm run servecomando da seguinte forma: npm run serve --port 8080. Eu preferia editar package.jsondiretamente para evitar digitação extra, mas a edição npm run serve --port 1234embutida pode ser útil para alguns.

Kevin
fonte
1

Adicione o PORTenvvariable ao seu servescript em package.json:

"serve": "PORT=4767 vue-cli-service serve",
Dominic
fonte
1

Oh meu Deus! Não é muito complicado, com essas respostas que também funcionam. No entanto, outras respostas para essa pergunta também funcionam bem.

Se você realmente quiser usar o vue-cli-servicee se você quiser ter a configuração de porta no seu package.jsonarquivo, que o seu 'vue criar <app-name>' comando basicamente cria, você pode usar a seguinte configuração: --port 3000. Portanto, toda a configuração do seu script seria assim:

...
"scripts": {
"serve": "vue-cli-service serve --port 3000",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
...

Estou usando @vue/cli 4.3.1 (vue --version)um dispositivo macOS.

Também adicionei a referência vue-cli-service: https://cli.vuejs.org/guide/cli-service.html

Ebrahim
fonte
0

Em meu projeto vue no código do Visual Studio, tive que definir isso em /config/index.js . Altere-o no:

module.exports = {
    dev: {
          // Paths
          assetsSubDirectory: 'static',
          assetsPublicPath: '/',
          proxyTable: {},

          host: 'localhost', // can be overwritten by process.env.HOST
          port: 8090, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
          autoOpenBrowser: false,
          errorOverlay: true,
          notifyOnErrors: true,
          poll: false    
         }
}
Terje Solem
fonte
0

Vá para node_modules/@vue/cli-service/lib/options.js
Na parte inferior do "devServer" desbloqueie os códigos
Agora forneça o número da porta desejada na "porta" :)

devServer: {
   open: process.platform === 'darwin',
   host: '0.0.0.0',
   port: 3000,  // default port 8080
   https: false,
   hotOnly: false,
   proxy: null, // string | Object
   before: app => {}
}
MRIDUAVA
fonte
3
vá para node_modules / @ vue / cli-service ...? Isso não é sobrescrito na atualização do npm?
Joeri