#3 | Frontend — Bagaimana Cara Mengubah Nomor Port Pada Vue CLI

source : pexels.com

Vue (cara pengucapannya /vjuː/, seperti view) adalah sebuah kerangka kerja nan progresif untuk membangun antarmuka pengguna dan Vue sangat mampu memberikan dan mendukung Single Page Application yang canggih ketika dikombinasikan dengan perkakas modern dan dukungan pustaka lain.

Pada artikel ini akan membahas bagaimana mengubah nomor port pada Vue, Vue secara default sudah menetapkan nomor port nya yaitu 8080 atau 8081 tergantung nomor port sudah terpakai atau belum, Namun disini kita bisa mengubah default tersebut dengan nomor port yang kita inginkan.

Untuk mengubah default port pada Vue CLI ada dua cara yang sifatnya sementara (temporary) dan permanen (permanent).

A. Temporary
Untuk cara ini nomor port bisa dengan mudah diubah dengan cara mengetikan perintah berikut ketika menjalankan proyek vue.

npm run serve -- --port 4000

B. Permanent
Sedangkan untuk cara yang sifatnya permanent nomor port bisa dengan mudah diubah dengan cara membuat file config yang di simpan di root folder dan menambahkan kode konfigurasi, untuk langkah-langkahnya adalah sebagai berikut :
a. Buat file baru vue.config.js lalu file tersebut disimpan di root folder project.
b. Buka file vue.config.js yang sebelumnya dibuat, lalu ketikan kode konfigurasi seperti berikut ini:

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

Itu adalah dua cara yang bisa dilakukan untuk mengubah port bawaan Vue CLI yang biasa nya mempunyai nomor port 8080/8081, menjadi nomor port yang anda inginkan.

noted : nomor port disini bisa dirubah dengan kebutuhan nomor port berapa yang akan digunakan.