Vite - change ouput directory of assets

Question

By default Vite generates files in the source directory under dist.

my-app/
├─ node_modules/
├─ dist/
│  ├─ assets/
|  |    | index.js
|  |    | index.css        
│  ├─ index.html
├─ index.html
├─ main.js
├─ style.scss
├─ package.json

I need to create a different folder for js and css files under assets. In other words, I need to put js and css filer under /assets/js and /assets/css folders respectively.

my-app/
├─ node_modules/
├─ dist/
│  ├─ assets/
|  |    |-js/
|  |    |   index.js
|  |    |-css/
|  |    |  index.css  

This is my config file.

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/, ""),
      },
    },
  },
});

How to do so?

Answer 1

The output filenames are configured in Rollup with build.rollupOptions:

1. Set output.assetFileNames to configure the asset filenames (for media files and stylesheets).

2. Set output.chunkFileNames to configure the vendor chunk filenames.

3. Set output.entryFileNames to configure the index.js filename.

// 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',
      },
    },
  },
});

demo

Answer 2

If you use @font-face in your css file, it masses up. You may need to put fonts in the same folder as the css files.

I have used woff and woff2 fonts

    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",
      },
    }