Question 17772 in Laravel Question posted in
The official Laravel Documentation can be found here.

Vite only importing some of the files in a folder – Laravel

I’m migrating my Laravel app to Vite, and one of the things I wanted to do is copy over my images assets to the public folder. Following the Laravel doc https://laravel.com/docs/9.x/vite#blade-processing-static-assets I added import.meta.glob('../images/**'); to my app.js file, and ran the build command.

images

As you can see there are seven images in the folder. But the command outputted only 3 of them as imported, and sure enough when reloading one of the not imported images was missing : Unable to locate file in Vite manifest: images/local_icon.png.

did I miss something?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    So what I ended up doing for now is creating a npm script "cpimages" : "rm -rf ./public/assets/images; cp -r ./resources/images ./public/assets" that I call when building "build": "npm run cpimages; vite build". My assets are available in my project, but not versionned by Vite. I can't think of anything else... If you guys got an idea please let me know.


  2. 0

    At the first time I also thought that it was a bug from vite. but when I read their documentation I found this is a feature for Vite. If an asset file like (images) whose size is less than 4kb(Default size for vite) is marked as an inline element. and convert it into base64 format so that It loads without sending a request.

    So when we use vite with Laravel we have to override this size. So simply we need this configuration.

    export default defineConfig({
    build: {
        assetsInlineLimit: "2048", // 2kb, set as your minimum file size or set 0 to disable the inline limit.
    },
})

    Documentation link: https://vitejs.dev/config/build-options.html#build-assetsinlinelimit

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search