Bagaimana untuk mengubah suai port dalam vue.js

Vue.js, sebagai rangka kerja hadapan, perlu memulakan pelayan pembangunan semasa proses pembangunan untuk melaksanakan fungsi seperti pemuatan panas dan pembinaan semula automatik. Secara lalai, pelayan pembangunan Vue.js mendengar port 8080. Walau bagaimanapun, dalam beberapa kes, kami mungkin perlu mengubah suai nombor port lalai untuk mengelakkan konflik atau memenuhi keperluan projek. Berikut ialah cara mengubah suai nombor port lalai dalam projek Vue.js.

Kaedah pertama: Gunakan parameter baris arahan

Vue-cli menyediakan cara mudah untuk mengubah suai port, iaitu menambah parameter --port atau -p pada arahan permulaan. Contohnya, untuk menukar nombor port kepada 3000, anda boleh menggunakan arahan berikut untuk memulakan pelayan pembangunan:

npm run serve -- --port 3000

Seperti yang anda lihat, dua baris mendatar ditambah selepas perintah npm run serve, yang bermakna --port 3000 berikut ialah parameter yang dihantar ke pelayan pembangunan. Selepas pengubahsuaian selesai, aplikasi Vue akan dimulakan pada port 3000.

Kaedah kedua: Ubah suai fail konfigurasi

Selain menggunakan parameter baris arahan, kami juga boleh mengubah suai nombor port lalai dengan mengubah suai fail konfigurasi projek Vue. Dalam versi Vue-cli 3.x, fail konfigurasi projek Vue terletak dalam fail vue.config.js dalam direktori akar projek. Jika fail itu tidak wujud, anda boleh menciptanya secara manual.

Dalam fail vue.config.js, kami boleh mengubah suai nombor port lalai dengan menghantar parameter konfigurasi ke objek devServer. Sebagai contoh, kod berikut menukar nombor port kepada 3000:

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

Perlu diambil perhatian bahawa jika kami mendapati bahawa aplikasi Vue tidak boleh dimulakan selepas mengubah suai port dan menggesa mesej ralat "Port telah diduduki ", ia mungkin Kerana pelabuhan sudah diduduki oleh aplikasi lain. Pada masa ini, kita perlu memilih nombor port lain dan mengubah suai fail konfigurasi atau parameter baris arahan yang sepadan.

Ringkasnya, sama ada anda menggunakan parameter baris arahan atau mengubah suai fail konfigurasi, anda boleh mengubah suai nombor port lalai pelayan pembangunan Vue.js dengan mudah untuk memenuhi keperluan projek yang berbeza. Pada masa yang sama, membiasakan diri dengan teknik konfigurasi ini juga akan membantu kami memahami rangka kerja Vue.js dengan lebih baik dan meningkatkan kecekapan pembangunan dan kualiti kod.

Atas ialah kandungan terperinci Bagaimana untuk mengubah suai port dalam vue.js. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!