Bagaimana mengubah nomor Port di proyek Vue-cli agar berjalan di port lain, bukan di 8080.

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

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

npm run serve -- --port 3000

Kemudian kunjungi http://localhost:3000/

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:

• https://cli.vuejs.org/config/#devserver
• https://cli.vuejs.org/config/#vue-config-js
• https://cli.vuejs.org/guide/mode-and-env.html

Vue CLI v2 (tidak digunakan lagi)

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

Referensi:

• http://vuejs-templates.github.io/webpack/
• https://github.com/vuejs-templates/webpack/blob/develop/template/build/webpack.dev.conf.js#L35

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.

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 .

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"
},

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.

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"
  },

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.

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 - [email protected] - 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.

Tambahkan PORTenvvariable ke serveskrip Anda di package.json:

"serve": "PORT=4767 vue-cli-service serve",

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

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    
         }
}

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 => {}
}