0
1.4K
VistasVite - 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?
1 Respuestas
Responde la pregunta0
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 :
- 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
publicdirectory 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.