Change output structure in Vite

Question

I am new to Vite and I have a feeling that I am missing something. I am trying to export files to their own directory, but I messed up and don't understand how to do it right.

The src folder looks like this:

my-app/
├─ node_modules/
├─ src/
│  ├─ fonts/
│  ├─ html/
│  ├─ images/
│  ├─ js/
│  ├─ static/
│  ├─ styles/
├─ package.json
├─ vite.config.js

I expect it to copy that, and so it does, but it does these "extra" things I can figure out why:

There is an assets map, with some JS in it.
Everything in the fonts folder is not only in the font folder, but all files are also copied to the export root.
The same counts for "some" images, they are copied to the root. The strange part is that it are only a couple of images svg's only, but not all svg's.
My CSS and JS files are copied to the root, not to the directories I'd like them in. I guess this is a setting. So js/app.js and css/app.css

My JS Vite.config.js

import { defineConfig } from 'vite';
export default defineConfig({
  publicDir: 'assets/',
  build: {
    emptyOutDir: true,
    outDir: '../../testproject/assets/test/',
    rollupOptions: {
      output: {
        entryFileNames: `[name].js`,
        assetFileNames: `[name].[ext]`,
      },
      input: [
        './src/js/app.js',
        './src/styles/app.scss',
      ],
    },
  },
});

Am I completely missing some settings file? I tried to reinstall in a different folder, but it does the same thing everywhere. Any idea how I can get things right?

Change output structure in Vite

0 Answers