Bagaimana mengubah nomor port di proyek vue-cli

Jawaban:

20

Port untuk template webpack Vue-cli ada di root aplikasi Anda myApp/config/index.js.

Yang harus Anda lakukan adalah mengubah portnilai di dalam devblok:

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

Sekarang Anda dapat mengakses aplikasi Anda dengan localhost:4545

juga jika Anda memiliki .envfile lebih baik untuk mengaturnya dari sana

— samayo
sumber
18
Dalam versi vuejs terbaru. File tersebut tidak lagi digunakan, sebagai gantinya menggunakan: <project_anda> /vue.config.js.
— Jianwu Chen
3
File myApp/config/index.jstidak ada!
— exhuma
3
Vue CLI 3 menggunakan vue.config.js di root proyek. Itu harus dibuat secara manual IIRC.
— Ege Ersoz
1
tidak ada vue.config.js di sana
— Geomorillo
19
"scripts": { "serve": "vue-cli-service serve --port 80" },
— Sudhir K Gupta
124

Jika Anda menggunakan vue-cli3.x, Anda cukup meneruskan port ke npmperintah seperti ini:

npm run serve -- --port 3000

Kemudian kunjungi http://localhost:3000/

— Nick Litwin
sumber
7
Anda menghemat waktu saya yang berharga, karena yang pertama --tidak tertulis di doc: cli.vuejs.org/guide/cli-service.html#using-the-binary . Saya mengetik npm run serve --port 3000yang menurut saya logis, tetapi saya mendapat kesalahan ... Jempol!
— toni07
3
Itu karena yang pertama --lolos dari parameter yang diberikan ke npm run servedan bukan ke vue-cli-service. Jika Anda mengedit package.jsondan serveperintah secara langsung, Anda memasukkannya seperti yang ditunjukkan dalam dokumentasi:"serve": "vue-cli-service serve --port 3000",
— MatsLindh
93

Terlambat datang ke pesta, tetapi menurut saya akan membantu untuk menggabungkan semua jawaban ini menjadi satu yang menguraikan semua opsi.

Dipisahkan dalam Vue CLI v2 (template webpack) dan Vue CLI v3, diurutkan berdasarkan prioritas (tinggi ke rendah).

Vue CLI v3

  • package.json: Tambahkan opsi port ke serveskrip:scripts.serve=vue-cli-service serve --port 4000
  • Opsi CLI --portuntuk npm run serve, misalnya npm run serve -- --port 3000. Perhatikan --, ini membuat melewati opsi port ke skrip npm alih-alih ke npm itu sendiri. Sejak setidaknya v3.4.1, seharusnya mis vue-cli-service serve --port 3000.
  • Variabel Lingkungan $PORT, misPORT=3000 npm run serve
  • .env File, envs yang lebih spesifik menimpa file yang kurang spesifik, mis PORT=3242
  • vue.config.js,, devServer.portmisdevServer: { port: 9999 }

Referensi:

Vue CLI v2 (tidak digunakan lagi)

  • Variabel Lingkungan $PORT, misPORT=3000 npm run dev
  • /config/index.js: dev.port

Referensi:

— wwerner
sumber
3
Terlihat seperti ini berubah anak laki-laki di cli vue terbaru (menggunakan 3.4.1), inilah saya "melayani" baris dalam package.json: "serve": "vue-cli-service serve --port 4000",. Bekerja dengan baik!
— RoccoB
@RoccoB Terima kasih, saya telah memverifikasi dan menambahkannya ke jawaban.
— wwerner
Jawaban di atas sepertinya tidak berfungsi di v3 saat ini. Saya mencoba opsi .env, package.json, vue.config.js, dan CLI tetapi semuanya diabaikan. Dokumen file konfigurasi mengatakan "Beberapa nilai seperti host, portdan httpsmungkin ditimpa oleh tanda baris perintah." cli.vuejs.org/config/#devserver Apakah saya melewatkan sesuatu? Ada lagi yang mengalami masalah?
— Ryan
2
@Ryan - Ini dilaporkan kemarin di Masalah Repositori VueJS CLI: github.com/vuejs/vue-cli/issues/4452 Dikatakan untuk menginstal portfinder ( github.com/http-party/node-portfinder ) karena ada melanggar perubahan yang terjadi dengan itu.
— Angelo
38

Saat jawaban ini ditulis (5 Mei 2018), vue-clikonfigurasinya dihosting di <your_project_root>/vue.config.js. Untuk mengubah port, lihat di bawah:

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

vue.config.jsReferensi lengkap dapat ditemukan di sini: https://cli.vuejs.org/config/#global-cli-config

Perhatikan bahwa seperti yang dinyatakan dalam dokumen, “Semua opsi untuk webpack-dev-server” ( https://webpack.js.org/configuration/dev-server/ ) tersedia di devServerbagian ini.

— TomyJaya
sumber
1
@srf: Jawaban diedit. Terima kasih telah menunjukkan tautan yang rusak.
— TomyJaya
Pasti a \. berpengaruh pada situs itu :)
— killjoy
13

Pilihan lain jika Anda menggunakan vue cli 3 adalah menggunakan file konfigurasi. Buat vue.config.jstingkat yang sama dengan Anda package.jsondan letakkan konfigurasi seperti ini:

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

Mengkonfigurasinya dengan skrip:

npm run serve --port 3000

berfungsi dengan baik tetapi jika Anda memiliki lebih banyak opsi konfigurasi, saya suka melakukannya di file konfigurasi. Anda dapat menemukan info lebih lanjut di dokumen .

— derFBeste
sumber
1
Saya suka jawaban ini karena ini menunjukkan bahwa vue.config.js dapat digunakan untuk hanya mengubah port dan membiarkan yang lain apa adanya yang awalnya diminta.
— Memutar
9

Cara terbaik adalah dengan memperbarui perintah skrip servis di package.jsonfile Anda . Tambahkan saja --port 3000seperti ini:

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

Di webpack.config.js:

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

Anda dapat mengubah port di module.exports-> devServer-> port.

Kemudian Anda mengulang npm run dev. Anda bisa mendapatkannya.

— pesawat terbang
sumber
8

Jika Anda ingin mengubah port localhost, Anda dapat mengubah tag skrip di package.json :

 "scripts": {
    "serve": "vue-cli-service serve --port 3000",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
— Fatih Başar
sumber
Terima kasih banyak :-)
— Adam Orlov
5

Pendekatan alternatif dengan vue-cliversi 3 adalah menambahkan .envfile di direktori root project (di sepanjang sisi package.json) dengan konten:

PORT=3000

Berjalan npm run servesekarang akan menunjukkan aplikasi berjalan pada port 3000.

— Chris Dickson
sumber
4

Ada banyak jawaban di sini yang bervariasi menurut versi, jadi saya pikir saya akan mengkonfirmasi dan menjelaskan jawaban Julien Le Coupanec di atas dari Oktober 2018 saat menggunakan Vue CLI . Dalam versi terbaru Vue.js pada posting ini - vue@2.6.10 - langkah-langkah yang diuraikan di bawah ini paling masuk akal bagi saya setelah melihat beberapa dari banyak jawaban di posting ini. The dokumentasi Vue.js referensi potongan teka-teki ini, tapi tidak cukup sebagai eksplisit.

  1. Buka package.jsonfile di direktori root dari proyek Vue.js.
  2. Cari "port" di package.jsonfile.

  3. Setelah menemukan referensi berikut ke "port", edit serveelemen skrip untuk mencerminkan port yang diinginkan, menggunakan sintaks yang sama seperti yang ditunjukkan di bawah ini:

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

  4. Pastikan untuk memulai ulang npmserver untuk menghindari kegilaan yang tidak perlu.

Dokumentasi menunjukkan bahwa salah satu dapat secara efektif mendapatkan hasil yang sama dengan menambahkan --port 8080ke akhir npm run serveperintah seperti: npm run serve --port 8080. Saya lebih suka mengedit package.jsonlangsung untuk menghindari pengetikan tambahan, tetapi mengedit npm run serve --port 1234inline mungkin berguna bagi sebagian orang.

— Kevin
sumber
1

Tambahkan PORTenvvariable ke serveskrip Anda di package.json:

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

Ya Tuhan! Tidak terlalu rumit, dengan jawaban-jawaban ini yang juga berhasil. Namun, jawaban lain untuk pertanyaan ini juga bekerja dengan baik.

Jika Anda benar-benar ingin menggunakan vue-cli-servicedan jika Anda ingin memiliki pengaturan pelabuhan di Anda package.jsonfile, yang Anda vue membuat <aplikasi-nama> 'perintah pada dasarnya menciptakan, Anda dapat menggunakan konfigurasi sebagai berikut: --port 3000. Jadi seluruh konfigurasi skrip Anda akan menjadi seperti ini:

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

Saya menggunakan @vue/cli 4.3.1 (vue --version)di perangkat macOS.

Saya juga telah menambahkan referensi layanan vue-cli: https://cli.vuejs.org/guide/cli-service.html

— Ebrahim
sumber
0

Dalam proyek vue saya dalam kode studio visual, saya harus mengatur ini di /config/index.js . Ubah di:

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

Pergi ke node_modules/@vue/cli-service/lib/options.js
Di bagian bawah di dalam "devServer" buka blokir kode
Sekarang berikan nomor port yang Anda inginkan di "port" :)

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
sumber
3
pergi ke node_modules / @ vue / cli-service ...? Bukankah itu ditimpa pada pembaruan npm?
— Joeri
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.