Ask Mengubah path hasil build project Vue CLI dari absolute menjadi relative AdityaDees

Vue CLI 3

Jika project anda adalah project yang dibuat dengan menggunakan Vue CLIatau 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