Por defecto, Vite genera archivos en el directorio de origen bajo dist .
my-app/ ├─ node_modules/ ├─ dist/ │ ├─ assets/ | | | index.js | | | index.css │ ├─ index.html ├─ index.html ├─ main.js ├─ style.scss ├─ package.json Necesito crear una carpeta diferente para los archivos js y css en assets . En otras palabras, necesito poner js y css filer en las carpetas /assets/js y /assets/css respectivamente.
my-app/ ├─ node_modules/ ├─ dist/ │ ├─ assets/ | | |-js/ | | | index.js | | |-css/ | | | index.cssEste es mi archivo de configuración.
import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import svgrPlugin from "vite-plugin-svgr"; // https://vitejs.dev/config/ export default defineConfig({ base: "./", plugins: [react(), svgrPlugin()], server: { open: true, proxy: { "/base": { target: "http://localhost:19000", changeOrigin: true, rewrite: (path) => path.replace(/^\/base/, ""), }, }, }, });¿Cómo hacerlo?
Los nombres de archivo de salida se configuran en Rollup con build.rollupOptions :
Establezca output.assetFileNames para configurar los nombres de archivo de activos (para archivos multimedia y hojas de estilo).
Establezca output.chunkFileNames para configurar los nombres de archivo de fragmentos del proveedor.
Establezca output.entryFileNames para configurar el nombre de archivo index.js .
// vite.config.js import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; // https://vitejs.dev/config/ export default defineConfig({ plugins: [react()], build: { rollupOptions: { output: { 1️⃣ assetFileNames: (assetInfo) => { let extType = assetInfo.name.split('.').at(1); if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) { extType = 'img'; } return `assets/${extType}/[name]-[hash][extname]`; }, 2️⃣ chunkFileNames: 'assets/js/[name]-[hash].js', 3️⃣ entryFileNames: 'assets/js/[name]-[hash].js', }, }, }, });Gracias tony19, esto también funciona correctamente, pero tengo un error de compilación: [vite:build-html] assetInfo.name.split(...).at no es una función
Yo cambio simple
assetInfo.name.split('.').at(1);a
assetInfo.name.split('.')[1];Si usa @font-face en su archivo css, se acumula. Es posible que deba colocar las fuentes en la misma carpeta que los archivos css.
He usado fuentes woff y woff2
rollupOptions: { output: { assetFileNames: (assetInfo) => { var info = assetInfo.name.split("."); var extType = info[info.length - 1]; if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(extType)) { extType = "img"; } else if (/woff|woff2/.test(extType)) { extType = "css"; } return `static/${extType}/[name]-[hash][extname]`; }, chunkFileNames: "static/js/[name]-[hash].js", entryFileNames: "static/js/[name]-[hash].js", }, }