t0berius's avatar
Level 13

make vite generate relative URLs

Howdy artisans,

how can I make vite generate relative URLs?

I already tried this:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
	plugins: [
	    laravel({
	        input: ['resources/css/app.css'],
	        refresh: true,
	    }),
	],
	base: ''
});

But all I get are still absolute URLs when including the CSS file by using:

@vite('resources/css/app.css')

Any idea what I do wrong here?

Using

ASSET_URL="/"

Had the effect of generating incorrect URLs like:

//build/assets/app-b30c7c50.css

setting it to

ASSET_URL=""

or

ASSET_URL=null

had no effect at all (meaning still absolute URL was generated).

0 likes
6 replies
aleahy's avatar

I'm not sure what is going wrong for you, but when I try it out in a fresh laravel app, just using blade, putting

ASSET_URL="/"

works fine for me. I'm running npm run build to get the appropriate link.

1 like
t0berius's avatar
Level 13

@aleahy did you set a URL for the local setup or just using

php artisan serve

and access it by 127.0.0.1:port?

Did you set any additional .env value?

aleahy's avatar

@t0berius I use valet so the url would be something like laravel.test. Nothing additional in the .env.

t0berius's avatar
Level 13
@aleahy can you show me an example of how your `app.css` appears inside the rendered HTML code?

I'm unable to get it working relative, for sure I can use filters on webserver level and rewrite the URL but this is just hacky.

aleahy's avatar
aleahy
Best Answer
Level 25

@t0berius

<link rel="preload" as="style" href="/build/assets/app-CeQoy5CN.css">

All I did was create a brand new laravel app:

laravel new urltest

Edit .env to have the ASSET_URL config

ASSET_URL="/"

Edit the app.css so it wasn't empty:

body {
    background: gray;
}

Add @vite directive to welcome.blade.php in place of the style tags:

 @vite(['resources/css/app.css', 'resources/js/app.js'])

Install js dependencies and compile

npm install
npm run build

Open up urltest.test in the browser. Inspection showed as above, and the js script tags were the same.

1 like

Please or to participate in this conversation.