CODEWITHSUNDEEP
vue.jsvuejs3vite
user8472012
user8472012

Reputation:

assets not showing after build process with vite and vue3

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?

Upvotes: 13

Views: 29839

Answers (2)

Swagat Samal
Swagat Samal

Reputation: 41

Vite by default sets the default path to '/', you need to override it to use your project default path for the production build.

Go to your vite.config.ts (if you have a JS project instead of TS, it would be filename.js instead) and add the base; check the example below.

export default defineConfig({
  plugins: [react()],
  base: '',
})

Upvotes: 4

match
match

Reputation: 11060

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

Upvotes: 7

Related Questions