Sinau Coding
Berbincang santai perihal pemrograman
Tukang ketik yang sedang belajar pemrograman
5:30 PM

Mengubah path hasil build project Vue CLI dari absolute menjadi relative

Vue CLI 3

Jika project anda adalah project yang dibuat dengan menggunakan Vue CLI atau Vue secara umum, maka secara default, hasil build-nya (js, css) akan di-inject ke dalam index.html dengan menggunakan path absolute. Dalam kondisi tertentu, anda mungkin tidak menginginkan path absolute ini, melainkan path relative. Nah, berikut ini adalah cara mudah untuk mengubah hasil build project dari Vue CLI dari absolute menjadi relative.

Di bawah ini adalah contoh hasil inject default di index.html yang menggunakan absolute path.

          
<link href=/css/chunk-07533330.0b2730fa.css rel=prefetch>
<link href=/css/chunk-094cbdeb.de916791.css rel=prefetch> 
<link href=/js/chunk-025378c2.3947e6cd.js rel=prefetch>
<link href=/js/chunk-07533330.bef1b6fd.js rel=prefetch>
<link href=/css/app.1e2d9022.css rel=preload as=style>
<link href=/css/chunk-vendors.930968ff.css rel=preload as=style>
          
        

Perhatikan karakter / setelah href yang menunjukkan path tersebut adalah absolute dari root.


Baca juga :
Cara install dan integrasi GrapesJS dengan Vue 2

Untuk mengubah path absolute tersebut menjadi relative, caranya sangat mudah. Silahkan anda buat file vue.config.js di root aplikasi anda, jika belum ada.


Lalu tambahkan konfigurasi di bawah ini ke dalam file tersebut.

          
module.exports = {
   baseUrl: './',
}
          
        

Lalu build ulang project anda (biasanya dengan perintah yarn build), maka hasilnya kurang lebih akan menjadi seperti ini.

          
<link href=css/chunk-00e042a2.e18cc915.css rel=prefetch>
<link href=css/chunk-00e7968f.bbe6189d.css rel=prefetch>
<link href=js/chunk-007c2b75.bb3899f0.js rel=prefetch>
<link href=js/chunk-00e042a2.79374f46.js rel=prefetch>
          
        

Berbeda dengan hasil sebelumnya, kali ini tidak ada karakter / setelah href yang menandakan bahwa path tersebut adalah relative terhadap file index.html.

Sekian tip/trik kali ini, selamat mencoba dan semoga yang sedikit ini bermanfaat.

Sumber : Vue CLI doc

Komentar

Load more

Terbaru

Cara install Postgresql di MacOS
Postgresql adalah salah satu object-relational database open source yang memiliki banyak fitur enterprise layaknya Or...
Cara install npm di Laravel
aravel adalah sebuah framework untuk webapp yang berbasis php, sedangkan npm adalah sebuah package manager untuk node...
Cara install MariaDB di MacOS dengan menggunakan Homebrew
MariaDB selain tersedia di Windows dan Linux, juga tersedia di MacOS dan dapat diinstall dengan menggunakan homebrew....
Cara insert data ke dalam list atau table tanpa menutup Modal
Desain halaman dan dialog tambah data biasanya adalah, User klik tombol yang akan memunculkan dialog, dimana dialog a...