assets not showing after build process with vite and vue3

Question

When running npm run build my pictures under src/assets/... are not available in the dist directory / production build. So not shown on the site. In dev mode it works for sure.

Any ideas how to make them available after building?

Answer 1

Assets in src/assets must be referenced in the code (via import or similar) to be included in the bundle. If you just want static files to be bundled with your project, you should use public/ instead:

Static assets can be handled in two different ways:

• Imported in JavaScript or referenced in templates/CSS via relative paths. Such references will be handled by webpack.
• Placed in the public directory and referenced via absolute paths. These assets will simply be copied and not go through webpack.

https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling