CODEWITHSUNDEEP
vue.jsvite
Dev
Dev

Reputation: 1223

Vite - Static Files Are Not Copying

I have a Vue.js app that relies on Vite. In this app, I have two static files that I need to copy to my dist directory: favicon.ico and manifest.json. My vite.config.js file looks like this:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig(({command, mode }) => {
  return {
    assetsDir: 'res',
    plugins: [vue()],
    publicDir: 'dist',
    root: 'src',
    build: {
      emptyOutDir: true,
      outDir: '../dist'
    }
  }
});

My directory structure looks like this:

/
  /dist
  /src
    /assets
      favicon.ico
      manifest.json
    /res
      /css
        theme.css
    App.vue
    main.js
    index.html
  package.json
  README.md
  vite.config.js

When I compile my program using npm run build, I can see a file named index.html that gets created in the dist directory. However, I have been unsuccessful in getting the favicon.ico and manifest.json file copied to the dist directory, which is what I need. I tried adding publicDir: 'assets' to the build options. However, that didn't work. I also tried creating a public directory under the src directory in an effort to follow along with this documentation. However, that did not move the files to the directory. What am I doing wrong?

Upvotes: 18

Views: 36762

Answers (1)

flydev
flydev

Reputation: 5704

Reason: The public (vite option) directory is relative to your root (vite option) directory.

So, as you specified root: 'src' and publicDir: 'dist' then your public dir is ./src/dist

Illustration of the folder tree based on your vite.config.js :

enter image description here

More information below

If you have assets that are :

  • Never referenced in source code (e.g. favicon.ico)
  • Must retain the exact same file name (without hashing)
  • ...or you simply don't want to have to import an asset first just to get its URL

Then the doc say:

You can place the asset in a special public directory under your project root. Assets in this directory will be served at root path / during dev, and copied to the root of the dist directory as-is.

This mean that if you simply place the favicon.ico under the /public dir it will be copied to the dist dir after build.

The note above is true if you have a vanilla vite config, but if you change the publicDir options of vite config then read below after the illustration.

enter image description here

favicon.ico copied in dist after vite build

If you set a custom publicDir :

As said on the top of this answer, the public (vite option) directory is relative to your root (vite option) directory.

So, if for example you set root: './src' and set publicDir: 'mypublic' then the public dir will be ./src/mypublic.

Upvotes: 30

Related Questions