0
1.4K
VistasVite: los archivos estáticos no se copian
Tengo una aplicación Vue.js que se basa en Vite . En esta aplicación, tengo dos archivos estáticos que necesito copiar en mi directorio dist : favicon.ico y manifest.json . Mi archivo vite.config.js se ve así:
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' } } });La estructura de mi directorio se ve así:
/ /dist /src /assets favicon.ico manifest.json /res /css theme.css App.vue main.js index.html package.json README.md vite.config.js Cuando compilo mi programa usando npm run build , puedo ver un archivo llamado index.html que se crea en el directorio dist . Sin embargo, no he podido copiar los archivos favicon.ico y manifest.json en el directorio dist , que es lo que necesito. Intenté agregar publicDir: 'assets' a las opciones de build . Sin embargo, eso no funcionó. También intenté crear un directorio public bajo el directorio src en un esfuerzo por seguir esta documentación . Sin embargo, eso no movió los archivos al directorio. ¿Qué estoy haciendo mal?
1 Respuestas
Responde la pregunta0
Motivo : el directorio público (opción de invitación) es relativo a su directorio raíz (opción de invitación).
Entonces, como especificó root: 'src' y publicDir: 'dist' entonces su directorio public es ./src/dist
Ilustración del árbol de carpetas basado en su vite.config.js :
Más información abajo 👇
Si tiene activos que son:
- Nunca mencionado en el código fuente (por ejemplo, favicon.ico)
- Debe conservar exactamente el mismo nombre de archivo (sin hash)
- ...o simplemente no quiere tener que importar un activo primero solo para obtener su URL
Entonces el doc dice:
Puede colocar el activo en un directorio
publicespecial debajo de la raíz de su proyecto. Los activos en este directorio se servirán en la ruta raíz/durante el desarrollo y se copiarán en la raíz del directorio dist tal como están.
👉 Esto significa que si simplemente coloca favicon.ico en el directorio /public , se copiará en el directorio dist después de la compilación.
💡 La nota anterior es cierta si tiene una configuración de vite vainilla, pero si cambia las opciones de publicDir de la configuración de vite , lea a continuación después de la ilustración.
favicon.ico copiado en dist después de vite build
👉 Si establece un publicDir personalizado:
Como se dijo en la parte superior de esta respuesta, el directorio public (opción de invitación) es relativo a su directorio root (opción de invitación) .
Entonces, si, por ejemplo, establece root: './src' y establece publicDir: 'mypublic' entonces el directorio público será ./src/mypublic .