Is possible to preserve assets folder structure?

[juliovedovatto]

I noticed Vite generates a flat assets structure when generating the bundle.

vite/packages/vite/src/node/plugins/asset.ts

Lines 223 to 228 in ad50060

	const basename = path.basename(file)
	const ext = path.extname(basename)
	const fileName = path.posix.join(
	config.build.assetsDir,
	`${basename.slice(0, -ext.length)}.${contentHash}${ext}`
	)

This is ideal when generating static sites, because where assets are stored are not "quite" important.

But in a context that Vite is a complementary tool, it would be good to have an option to preserve such directory structure. Specially for large projects.

For example:

I would like my fonts to be stored inside the assets/fonts/ folder.

• Source: src/fonts/font.woff2
• Build: dist/assets/fonts/font.[hash].woff2

But Instead I get:

• Source: src/fonts/font.woff2
• Build: dist/assets/font.[hash].woff2

I noticed this behavior for CSS url() assets and for <img> tags.

Here is something to illustrate:

// vite/packages/vite/src/node/plugins/asset.ts
const basename = path.basename(file) 
// new option: preserveAssetsDir
const directory = config.build.preserveAssetsDir && path.basename(path.dirname(file)) : ''
// apply some logic to avoid generating file in the wrong place
// [...]
const ext = path.extname(basename) 
const fileName = path.posix.join( 
  config.build.assetsDir, 
  directory,
  `${basename.slice(0, -ext.length)}.${contentHash}${ext}` 
) 

I don't know the impact to have such option available, I'm merely raising a question to see if other folks can share the same opinion.

[tnbao]

I really really need this option, especially when I want to keep the image/css directory structure.
Currently there is no workaround for this issue.

[tnbao]

For those who want to keep the CSS structure:

// emit corresponding css file
const referenceId = this.emitFile({
    // preserveAssetsDir is the custom option
    name: config.build.preserveAssetsDir ? cssFileName : path$o.basename(cssFileName),
    type: 'asset',
    source: chunkCSS,
});

[jkilzi]

It will be great to have this in library mode

[MansourM]

I'm also new to vite
wanted something similar, best i could do was

import {defineConfig} from 'vite';
import laravel from 'laravel-vite-plugin';
import {viteStaticCopy} from 'vite-plugin-static-copy'
import {glob} from "glob";

export default defineConfig({
    build: {
        manifest: true,
        rtl: true,
        outDir: 'public/assets/',
        cssCodeSplit: true,
        rollupOptions: {
            output: {
                assetFileNames: (asset) => {
                    switch (asset.name.split('.').pop()) {
                        case 'css':
                            return 'css/' + `[name]` + '.min.css';
                        case 'png':
                        case 'jpg':
                        case 'ico':
                        case 'svg':
                            return 'images/' + `[name]` + `[extname]`;
                        //TODO how to handle svg fonts? (they can be both font or image?)
                        case 'ttf':
                        case 'otf':
                        case 'woff':
                        case 'woff2':
                            return 'fonts/' + `[name]` + `[extname]`;
                        default:
                            return 'other/' + `[name]` + `[extname]`;
                    }
                },
                entryFileNames: 'js/' + `[name]` + `.min.js`,
            },
        },
    },
    plugins: [
        laravel(
            {
                input: [
                    'resources/scss/bootstrap.scss',
                    'resources/scss/icons.scss',
                    'resources/scss/app.scss',
                    'resources/scss/custom.scss',

                    ...glob.sync("resources/css/*.css"),

                    'resources/js/app.js',
                    'resources/js/api.js',
                    'resources/js/ConstantMapper.js',
                    'resources/js/helpers.js',
                    'resources/js/index.js',
                    'resources/js/reload.js',
                ],
                refresh: true
            }
        ),
        viteStaticCopy({
            targets: [
                {
                    src: 'resources/static/css',
                    dest: ''
                },
                {
                    src: 'resources/static/images',
                    dest: ''
                },
                {
                    src: 'resources/static/js',
                    dest: ''
                },
                {
                    src: 'resources/static/json',
                    dest: ''
                },
            ]
        }),
    ],
});

[liuyi]

Keep assets file structure is very important, when create multi-page site.
I want to organize my site like below:
no-auth visitor url:domain.com/login/
authorized visitor, url:domain.com/manage/

file structure:
/assets/pub/login/xxx.jpg
/assets/pub/login/xxxx.js

/assets/manage/home/xxxx.jpg
/assets/manage/home/xxxx.js

=======
I can only output url, but get flat assets
vite.config.json:
rollupOptions:{ input:{ "manage/index":path.resolve(__dirname,'index.html'), login:path.resolve(__dirname,'login.html') } }

[pmrotule]

I'm used to achieving this with Rollup using the output.preserveModules option set to true:
https://rollupjs.org/configuration-options/#output-preservemodules

export default {
  input: ['src/module.js', `src/another/module.js`],
  output: [
    {
      format: 'es',
      dir: 'dist',
      preserveModules: true,
      preserveModulesRoot: 'src',
    },
  ],
}

So I would assume you can do it with Vite by simply setting that option in build.rollupOptions

[MansourM]

Tested this

rollupOptions: {
            output: {
                assetFileNames: (asset) => {
                    switch (asset.name.split('.').pop()) {
                        case 'css':
                            return 'css/' + `[name]` + '.min.css';
                        case 'png':
                        case 'jpg':
                        case 'ico':
                        case 'svg':
                            return 'images/' + `[name]` + `[extname]`;
                        //TODO how to handle svg fonts? (they can be both font or image?)
                        case 'ttf':
                        case 'otf':
                        case 'eot':
                        case 'woff':
                        case 'woff2':
                            return 'fonts/' + `[name]` + `[extname]`;
                        default:
                            return 'other/' + `[name]` + `[extname]`;
                    }
                },
                entryFileNames: 'js/' + `[name]` + `.min.js`,
                preserveModules: true,
            },
        }

Error:
Invalid value for option "preserveEntrySignatures" - setting this option to false is not supported for "output.preserveModules".

[pmrotule]

@MansourM I also got this error and found out that Vite overwrites the value of preserveEntrySignatures based on a few conditions:

vite/packages/vite/src/node/build.ts

Lines 536 to 541 in fe6cb93

	const rollupOptions: RollupOptions = {
	preserveEntrySignatures: ssr
	? 'allow-extension'
	: libOptions
	? 'strict'
	: false,

So I fixed it by providing lib options which will automatically set preserveEntrySignatures to strict and get rid of the error.

build: {
  lib: {
    entry: 'src/module.js',
    formats: ['es'],
  },
  rollupOptions: {
    output: [
      {
        format: 'es',
        dir: 'dist',
        preserveModules: true,
        preserveModulesRoot: 'src',
      },
    ],
    // ...

[Nathan7139]

This solved my problem perfectly. It should be marked as the answer.

[karlvr]

I created a PR to add an option to vite for this. #17626