Laravel Vite static asset handling - dev vs build

Question

I'm having somes issues understanding how Vite works with static assets like image and fonts, and how to correctly reference them. Can anyone advise?

After reading the documentation, for static images I stored them in the "resources/images" folder and simply added the following in to app.js:

import.meta.glob([
'../images/**',
  ]);

and I can reference them in blade files using the following:

{{ Vite::asset('resources/images/someimage.jpg') }}

For fonts I've added the folder manually in to "public/fonts", and I reference them from the app.css file like so:

@font-face {
font-family: "Bebas Neue Pro";
src:url(/fonts/bebas_neue_pro/bebas_neue_pro.otf) format("opentype"),
}

...and add them to my Taiwind config like so:

theme: {
extend: {
fontFamily: {
sans: ["Bebas Neue Pro", 'sans-serif'],
"Bebas Neue Pro": ["Bebas Neue Pro"],
},
},
},

I run npm run build and when I view the site it works perfectly.

However when I run using npm run dev the images only work if I've already run "build" previously, and the fonts aren't picked up at all, I get "404 not found" errors.

Is there a way to get it working correctly for both build and dev?

Answer 1

To me it sounds like you want to put the static files in the public directory. Then you can reference them the same way in both dev and build mode (using their absolute path (without /public in the beginning)).

https://vitejs.dev/guide/assets.html#the-public-directory