Vite multiple apps with same source

I am new to vite, to start with, I don't actually know what kind of structure I need.

I need to build multiple apps but some of them depend on the same components.

It worked well by far however I think mixed something

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
    <script type="module" crossorigin src="/assets/modules/modules\\VPlayerList\\index-74e8dd8e.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/js/main-a0df4ea4.js">
    <link rel="stylesheet" href="/assets/main.44382b18.css">
  </head>
  <body>
    <div id="app"></div>
    
  </body>
</html>

Hrefs are wrong, what am I missing?

forgot to attach vite config:

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import path, { resolve } from 'path'
import glob from 'glob';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), vueJsx()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    rollupOptions: {
      input: Object.fromEntries(
        glob.sync("src/modules/**/*.html").map((file:string) => [
          path.relative(
            "src",
            file.slice(0, file.length - path.extname(file).length)
          ),
          fileURLToPath(new URL(file, import.meta.url)),
          
        ])
      ),
      output: {
        chunkFileNames: 'assets/js/[name]-[hash].js',
        entryFileNames: 'assets/modules/[name]-[hash].js',
        dir: "dist"
      }
    },
  },
})

Solution

I'm having the same issue, but cannot add comments so I'm posting my progress as an answer.

I needed to distribute 3 versions for my app, this is, a Mobile (hybrid) app compiled with CapacitorJS, an Online version (with some hidden functionalities, api tokens and such) and a Lite version (with minimal features).

All three apps share most of the system components, and it could be very easy to me to just build the three different versions at once.

My closest approach was to use 3 entry points, this is, three different index.html files. However, I cannot separate the build directories that are generated from the builds. This is my vite.config.js file so far:

import { resolve } from 'path';
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  base: "",
  build: {
    rollupOptions: {
      input: {
        web: resolve(__dirname, './index_web.html'),
        mobile: resolve(__dirname, './index_mobile.html'),
        lite: resolve(__dirname, './index_lite.html'),
      },
      output: [
        {
          name: "web",
          dir: "dist_web",
        },
        {
          name: "mobile",
          dir: "dist_mobile",
        },
        {
          name: "lite",
          dir: "dist_lite",
        }
      ]
    },
  },
});

As stated before, this approach just builds three dist folders containing the three apps together. Maybe I'm missing a way to link outputs to inputs or there is a simpler way using different build commands.

For now, I'm using three different vite.config.js files, and building each version using different build commands declared in package.json:

{
  "name": "vite-multiple-build",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build-web": "vite build --config vite.config.web.js",
    "build-mobile": "vite build --config vite.config.mobile.js",
    "build-lite": "vite build --config vite.config.lite.js",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.24",
    "@types/react-dom": "^18.0.8",
    "@vitejs/plugin-react": "^2.2.0",
    "vite": "^3.2.3"
  }
}

This seems to work fine, the only issue is that entry points need to be renamed after building.