vite output html asset path is wrong

Question

I am having problem building the html files with vite. This maybe because I'm using all assets from root dir like scripts for src/scripts and scss for src/scss. I am using eleventy to generate htmls in /src/pages directory. These htmls are then used as entrypoints. I have different layouts and partials files, which is why I'm referencing all my assets with /scripts and scss.But, now when vite builds the html files. all assets are being referenced as /assets/script in all html files. Does someone have any idea on how to solve this? Expected outcome is path should be ../assets for nested pages.

Here is my vite.config.ts

    import * as glob from 'fast-glob';
    import { resolve, join } from 'path';
    import { defineConfig } from 'vite';
    import eslintPlugin from 'vite-plugin-eslint';
    import styleLint from '@amatlash/vite-plugin-stylelint';
    
    import * as tsconfig from './tsconfig.json';
    
    const paths = tsconfig.compilerOptions.paths;
    
    const defaultAlias = Object.keys(paths).reduce((acc, key) => {
      const value = paths[key][0];
      const path: string = key.replace('/*', '');
      acc.push({
        find: path,
        replacement: resolve(__dirname, value.replace('/*', '')),
      });
      return acc;
    }, [] as any[]);
    
    const files = glob.sync(resolve(__dirname, 'src') + '/**/*.html').reduce((acc: Record<string, string>, cur: string) => {
      let name = cur
        .replace(join(__dirname) + '/src/', '')
        .replace('/index.html', '')
        .replace('.html', '');
      // If name is blank, make up a name for it, like 'home'
      if (name === '') {
        name = 'home';
      }
    
      acc[name] = cur;
      return acc;
    }, {});
    
    console.clear();
    console.log(files);
    export default defineConfig({
      root: 'src',
      base: './',
      clearScreen: false, // This is to show Eleventy output in the console along with Vite output
      plugins: [
        styleLint(),
        eslintPlugin({
          fix: true,
          exclude: ['node_modules', '*.html', 'src/pages', 'src/index.html'],
        }),
      ],
      build: {
        rollupOptions: {
          input: files,
        },
        outDir: '../dist', // The output directory is relative to the project root, so we need to put it back one folder to work
      },
      resolve: {
        alias: [
          ...defaultAlias,
          {
            find: /~(.+)/,
            replacement: join(process.cwd(), 'node_modules/$1'),
          },
        ],
      },
    });

Answer 1

To change the output dir to a custom output dir, you have to adjust the value of output.dir in RollupOptions settings in your vite.config.js:

  [...]

  build: {

    [...]

    rollupOptions: {
      output: {
        dir: 'myassets'   <--- change this value
      }
    }
  },

  [...]

More informations:

• https://rollupjs.org/guide/en/#output-generation-hooks