Reputation: 1223
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
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
:
More information below
If you have assets that are :
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.
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