Nuxt npm run generate (404 assets not found)

Hey guys,

I have a problem with the static files after I run npm run generate and build the static files. All my files in the assets folder show as “404 not found”.

In my components I reference the images like ~/assets/img1.jpg. You can see this in the repo if you go into e.g vue-components/components/Heros/Hero1.vue

The same thing happens when I try to deploy to Netlify, but Im guessing it’s the same thing.

Any help appreciated greatly! :smile:


Anyone got a solution?

  1. When does that happen? How do you serve the files after you generated them?
  2. Can you share at what (wrong) path it’s looking for the files that leads to a 404?

Thank you for replying!

Not exactly sure what you mean by “how do you serve the files after you generated them”, but Im gonna explain in steps what I do.

  1. Create my component with e.g an image with the src of something like ~/assets/img/image1.jpg
  2. When Im done I run npm run generate and get all the static files in the “dist” folder and open up the index.html file
  3. The images are not shown on the page.

Im attaching some images here too :smile:

Oh, so you directly opened the file in your browser, not serving it from a webserver?

In that case the paths break because nuxt by default uses absolute paths, but those don’t work in files that you directly open in the browser, only relative paths do (which is just how HTML works and not specific to Vue or nuxt).

In turn, this means that:

  1. They should work on netlify right now, without any changes
  2. setting build.publicPath to a relative path would make them work in a browser

Yeah, my problem is that I can’t get it live on Netlify because when I run npm run generate as the build command on Netlify it throws an error with all the assets files. Image attached :slight_smile:

Thank you for your help!

And I thought Nuxt generated all static files that should not need any extra webserver to be displayed?
EDIT: I do use Live Server to display the index.html file - not just opening it directly from my finder files :smile:

I think I found the reason for the netlify issue:

  • Your folder names are partially uppercase but
  • the paths that you use in your templates are all lowercase
  • Your local OS has a case-insensitive file system
  • netlify’s servers (linux) have a case-sensitive file system

Hence, on their system, the paths that you use in the template don’t exist.

'assets/images/heros/hero-background' !== 'assets/images/Heros/hero-background'

So you do use a web server. And still the images don’t resolve? Maybe LiveServer also treats them case-sensitive or something?

1 Like

Oh my god, thank you so much!!
I had to go through the naming convention for the whole project and finally got it live!

Have a great day :smile:

1 Like