> ## Content Index
> Fetch the complete content index at: https://debug.my.id/llms.txt
> Use this file to discover other available public pages before exploring further.

# Mengubah path hasil build project Vue CLI dari absolute menjadi relative
- URL: https://debug.my.id/vue-cli-mengubah-path-absolute-menjadi-relative/
- Published: 2018-11-09T05:30:00.000Z
- Updated: 2025-06-24T22:25:16.000Z
- Author: Tukang Debug
- Tags: JavaScript, Tip/trik

Jika project anda adalah project yang dibuat dengan menggunakan [**Vue CLI**](https://debug.my.id/vue-cli-mengubah-path-absolute-menjadi-relative/) 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](https://debug.my.id/vue-cli-mengubah-path-absolute-menjadi-relative/).

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

```html
<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.

![](https://debug.my.id/content/images/2025/06/image-75.png)

Lalu tambahkan konfigurasi di bawah ini ke dalam file tersebut.

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

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

```html
<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](https://cli.vuejs.org/config/?ref=debug.my.id#baseurl)