Vue-cli projesinde port numarası nasıl değiştirilir

Yanıtlar:

21

Vue-cli web paketi şablonunun bağlantı noktası, uygulama köklerinizde bulunur myApp/config/index.js.

Tek yapmanız gereken blok portiçindeki değeri değiştirmek dev:

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

Artık uygulamanıza şununla erişebilirsiniz: localhost:4545

ayrıca .envoradan ayarlamak için daha iyi dosyanız varsa

— Samayo
kaynak
18
En son vuejs sürümünde. Dosya artık kullanılmıyor, bunun yerine: <projenizin_kökü> /vue.config.js.
— Jianwu Chen
3
Dosya myApp/config/index.jsmevcut değil!
— exhuma
3
Vue CLI 3, proje kökünde vue.config.js kullanır. IIRC'nin manuel olarak oluşturulması gerekir.
— Ege Ersöz
1
orada vue.config.js yok
— Geomorillo
19
"scripts": { "serve": "vue-cli-service serve --port 80" },
— Sudhir K Gupta
127

vue-cli3.x kullanıyorsanız , bağlantı noktasını şu şekilde npmkomuta aktarabilirsiniz :

npm run serve -- --port 3000

O halde ziyaret edin http://localhost:3000/

— Nick Litwin
kaynak
7
Birincisi belgede-- yazılmadığı için bana çok değerli zaman kazandırdınız : cli.vuejs.org/guide/cli-service.html#using-the-binary . Bana npm run serve --port 3000mantıklı gelen yazı yazıyordum ama hatalar aldım ... Başparmak yukarı!
— toni07
3
İlk Çünkü --kaçması parametreleri verilen npm run serveve yok etmek vue-cli-service. Düzenleme Eğer varsa package.jsonve serve: belgelerinde gösterildiği gibi doğrudan komut, bunu girmek"serve": "vue-cli-service serve --port 3000",
— MatsLindh
95

Partiye geç kaldım, ancak bence tüm bu cevapları tüm seçenekleri özetleyen tek bir cevapta birleştirmenin faydalı olacağını düşünüyorum.

Vue CLI v2 (web paketi şablonu) ve Vue CLI v3'te ayrılmıştır, önceliğe göre sıralanmıştır (yüksekten düşüğe).

Vue CLI v3

  • package.json: serveKomut dosyasına bağlantı noktası seçeneği ekleyin :scripts.serve=vue-cli-service serve --port 4000
  • CLI Seçeneği --portiçin npm run serveörneğin npm run serve -- --port 3000. Unutmayın --, bu bağlantı noktası seçeneğini npm'nin kendisi yerine npm betiğine geçirir. En az v3.4.1 olduğundan, örn vue-cli-service serve --port 3000.
  • Ortam Değişkeni $PORT, ör.PORT=3000 npm run serve
  • .env Dosyalar, daha spesifik ortamlar, daha az spesifik olanları geçersiz kılar, örneğin PORT=3242
  • vue.config.js, devServer.port, MeseladevServer: { port: 9999 }

Referanslar:

Vue CLI v2 (kullanımdan kaldırıldı)

  • Ortam Değişkeni $PORT, ör.PORT=3000 npm run dev
  • /config/index.js: dev.port

Referanslar:

— wwerner
kaynak
3
Böyle görünüyor burada package.json benim "hizmet" çizgi, (3.4.1 kullanarak) son vue cli bir tad değiştirdi: "serve": "vue-cli-service serve --port 4000",. Harika çalışıyor!
— RoccoB
@RoccoB Teşekkürler, doğruladım ve cevaba ekledim.
— wwerner
Yukarıdaki cevaplar şu anda v3'te işe yaramıyor gibi görünüyor. .Env seçeneğini, package.json, vue.config.js ve CLI komut seçeneğini denedim ancak hepsi göz ardı ediliyor. Yapılandırma dosyası dokümanlar "Bazı değerler gibi söylemek host, portve httpskomut satırı bayrakları ile yazılabilir." cli.vuejs.org/config/#devserver Bir şeyi mi kaçırıyorum? Başka sorunları olan var mı?
— Ryan
2
@Ryan - Bu, dün VueJS CLI Deposu Sorunlarında bildirildi: github.com/vuejs/vue-cli/issues/4452 Portföy ( github.com/http-party/node-portfinder ) olduğu gibi bununla birlikte meydana gelen kırılma değişimi.
— Angelo
38

Bu cevabın yazıldığı sırada (5 Mayıs 2018), vue-cliyapılandırması adresinde barındırılıyor <your_project_root>/vue.config.js. Bağlantı noktasını değiştirmek için aşağıya bakın:

// 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,
  },
  // ...
}

Tam vue.config.jsreferans burada bulunabilir: https://cli.vuejs.org/config/#global-cli-config

Dokümanlarda belirtildiği gibi, "webpack-dev-server için tüm seçenekler" ( https://webpack.js.org/configuration/dev-server/ ) devServerbölüm içinde mevcuttur .

— TomyJaya
kaynak
1
@srf: Cevap düzenlendi. Bozuk bağlantıya işaret ettiğiniz için teşekkürler.
— TomyJaya
Bir \ olmalı. bu sitedeki etkisi :)
— killjoy
13

Vue cli 3 kullanıyorsanız bir başka seçenek de bir yapılandırma dosyası kullanmaktır. Sizinle vue.config.jsaynı seviyede bir yapın package.jsonve aşağıdaki gibi bir yapılandırma koyun:

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

Komut dosyasıyla yapılandırma:

npm run serve --port 3000

harika çalışıyor, ancak daha fazla yapılandırma seçeneğiniz varsa, bunu bir yapılandırma dosyasında yapmayı seviyorum. Dokümanlarda daha fazla bilgi bulabilirsiniz .

— derFBeste
kaynak
1
Bu yanıtı, vue.config.js'nin yalnızca bağlantı noktasını değiştirmek ve diğer her şeyi olduğu gibi bırakmak için kullanılabileceğini gösterdiği için seviyorum, bu da başlangıçta sorulan şeydi.
— Twisted
10

En iyi yol, dosyanızdaki hizmet betiği komutunu güncellemektir package.json. Sadece şöyle ekleyin --port 3000:

"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
kaynak
8

İçinde webpack.config.js:

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

Bağlantı noktasını module.exports-> devServer-> içinden değiştirebilirsiniz port.

Sonra npm run dev. Sen alabilirsin.

— uçak
kaynak
8

Localhost bağlantı noktasını değiştirmek istiyorsanız, package.json içindeki betik etiketini değiştirebilirsiniz :

 "scripts": {
    "serve": "vue-cli-service serve --port 3000",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
— Fatih Başar
kaynak
Çok teşekkür ederim :-)
— Adam Orlov
5

vue-cliSürüm 3 ile alternatif bir yaklaşım .env, kök proje dizinine (yanda package.json) içeriği olan bir dosya eklemektir :

PORT=3000

Koşu npm run serveşimdi uygulama portu 3000 çalışıyorsa gösterecektir.

— Chris Dickson
kaynak
4

Burada sürüme göre değişen çok sayıda cevap var, bu yüzden Vue CLI'yi kullanırken Julien Le Coupanec'in yukarıdaki cevabını Ekim 2018'den itibaren onaylayıp açıklayacağımı düşündüm . Bu yazı itibariyle Vue.js'nin en son sürümünde - vue@2.6.10 - aşağıda özetlenen adımlar , bu gönderideki sayısız yanıtlardan bazılarına baktıktan sonra bana en mantıklı geldi. Vue.js dokümantasyon referanslar bu bulmacanın parçaları, ama açık olarak oldukça değildir.

  1. package.jsonDosyayı Vue.js projesinin kök dizininde açın .
  2. package.jsonDosyada "bağlantı noktası" arayın .

  3. Aşağıdaki "bağlantı noktası" başvurusunu bulduktan sonra, servekomut dosyası öğesini, aşağıda gösterildiği gibi aynı sözdizimini kullanarak istenen bağlantı noktasını yansıtacak şekilde düzenleyin :

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

  4. npmGereksiz çılgınlığı önlemek için sunucuyu yeniden başlattığınızdan emin olun .

Tek etkili ekleyerek aynı sonucu alabilirsiniz dokümantasyon gösterileri --port 8080sonuna npm run serveşöyle komuta: npm run serve --port 8080. package.jsonEkstra yazmaktan kaçınmak için doğrudan düzenlemeyi tercih ettim , ancak npm run serve --port 1234satır içi düzenleme bazıları için kullanışlı olabilir.

— Kevin
kaynak
1

PORTEnvvariable'ı servekomut dosyanıza ekleyin package.json:

"serve": "PORT=4767 vue-cli-service serve",
— Dominik
kaynak
1

Aman Tanrım! İşe yarayan bu cevaplarla o kadar da karmaşık değil. Ancak, bu sorunun diğer cevapları da işe yarıyor.

Gerçekten kullanmak istiyorsanız vue-cli-serviceve size de port ayarını yapmak istiyorsanız package.jsondosyanızın, 'vue <app-name> oluşturmak' komutu temelde oluşturur, aşağıdaki yapılandırma kullanabilirsiniz: --port 3000. Yani betiğinizin tüm konfigürasyonu şu şekilde olacaktır:

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

Ben kullanıyorum @vue/cli 4.3.1 (vue --version)bir MacOS cihazda.

Ayrıca vue-cli-hizmet referansını da ekledim: https://cli.vuejs.org/guide/cli-service.html

— Ebrahim
kaynak
0

Görsel stüdyo kodundaki vue projemde , bunu /config/index.js içinde ayarlamak zorunda kaldım . Bunu şurada değiştirin:

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
kaynak
0

Node_modules/@vue/cli-service/lib/options.js adresine gidin
"devServer" içinde altta kodların engelini kaldırın
Şimdi "port" kısmında istediğiniz port numarasını verin :)

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
kaynak
3
node_modules / @ vue / cli-service'e gidin ...? Bunun npm güncellemesinde üzerine yazılmaz mı?
— Joeri
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.