How to add a public directory in vitejs configuration file

Question

I have a folder (named assets) with pictures, pdf files and 3d models that I want to include in the public static path at dist directory after building with Vite.js.

I am using this code for the vite.config.js:

  export default {
    publicDir: './assets'
  }

However after building, the files are not copied to the dist folder. When I run vite serve the website works, but I get "not found error" for all the files that should've been in that public folder. Thanks a lot for the help.

I actually managed to solve it with this code: ```module.exports = { root: './', build: { outDir: 'dist', }, publicDir: 'assets' } ``` — SDEscobedo, Aug 09 '21 at 15:57

score 12 · Accepted Answer · edited Oct 26 '22 at 08:55

12

Not sure why, but the problem was solved with this code at vite.config.js

module.exports = {
    root: './',
    build: {
        outDir: 'dist',
    },
    publicDir: 'assets'
 }

edited Oct 26 '22 at 08:55

ssi-anik

2,998
3
23
52

answered Aug 11 '21 at 11:35

SDEscobedo

385
1
2
11

19

typo in your first vite.config.js: pulicDir – Floeske Oct 06 '21 at 15:39

score 0 · Answer 2 · answered May 05 '23 at 03:22

Just adding to this one because I was stuck on it with react:

The Vite config docs specify this format:

export default {
  // config options
}

They also suggest you pop this tag on the top for auto completion:

/** @type {import('vite').UserConfig} */
export default defineConfig({
  // config options
})

When I added the tag it auto completed the build directory config for me:

export default defineConfig({
    build: {
        outDir: 'public',
    },
})

How to add a public directory in vitejs configuration file

2 Answers2