Question

189

Vite - change ouput directory of assets

rated 0 times [ 191] [ 2] / answers: 1 / hits: 23822 / 2 Years ago, fri, february 18, 2022, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ryderalfonsos

Add To Favorites

Follow

Total Points: 655

Total Questions: 88

Total Answers: 91

Location: Nauru

Member since Thu, Feb 2, 2023

1 Year ago

ryderalfonsos questions

1 React application with Service Worker - Force update of browser cache on new version

Tue, Dec 1, 20, 00:00, 4 Years ago

1 Call Action Method on button click ASP.NET MVC

Mon, Sep 9, 19, 00:00, 5 Years ago

1 Customizing the JS/CSS in a TrustPilot widget

Wed, Feb 13, 19, 00:00, 5 Years ago

1 How to display a string javascript in HTML

Tue, Feb 12, 19, 00:00, 5 Years ago

1 How to make an undo function in canvas?

Fri, Dec 28, 18, 00:00, 6 Years ago

View All

answered 2 Years ago jennie · Accepted Answer

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

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

Set output.chunkFileNames to configure the vendor chunk filenames.

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