Mengubah path hasil build project Vue CLI dari absolute menjadi relative - Hallo sahabat Dev-Create, Pada Artikel yang anda baca kali ini dengan judul Mengubah path hasil build project Vue CLI dari absolute menjadi relative, kami telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya. mudah-mudahan isi postingan Artikel javascript, Artikel Tip/trik, Artikel Vue.js, yang kami tulis ini dapat anda pahami. baiklah, selamat membaca.

Judul : Mengubah path hasil build project Vue CLI dari absolute menjadi relative
link : Mengubah path hasil build project Vue CLI dari absolute menjadi relative

Baca juga


Mengubah path hasil build project Vue CLI dari absolute menjadi relative


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.

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


Demikianlah Artikel Mengubah path hasil build project Vue CLI dari absolute menjadi relative

Sekianlah artikel Mengubah path hasil build project Vue CLI dari absolute menjadi relative kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya.

Anda sekarang membaca artikel Mengubah path hasil build project Vue CLI dari absolute menjadi relative dengan alamat link https://dev-create.blogspot.com/2018/11/mengubah-path-hasil-build-project-vue.html