4

I have a multi page app that I'm trying to build with Vite.js (migrating from Webpack). When building the Vite + React example code I see that it emits:

  • dist/index.html
  • dist/assets/<various assets>

However, when I try to make a multi page app as shown in the docs none of the HTMLs are emitted (but the rest of the content of /assets/ is there). Why is this?

// vite.config.js excerpt:
import { defineConfig } from 'vite'
import { dirname } from 'path';
import { fileURLToPath } from 'url';

export default defineConfig({
  root: 'client',
  build: {
    outDir: 'dist',
    rollupOptions: {
      input: {
        main: dirname(fileURLToPath(import.meta.url + 'index.html')),
        login: dirname(fileURLToPath(import.meta.url + 'login.html')),
      }
    }
  },
});
Michael Johansen
  • 4,688
  • 5
  • 29
  • 47
  • remove `dirname` which is removing the filename only directory names will be left out. – Chandan Aug 18 '21 at 06:07
  • @Chandan If I remove dirname I get an error during `vite build` that says `SyntaxError: Assigning to rvalue`. – Michael Johansen Aug 19 '21 at 17:29
  • try `new URL(`./index.html`, import.meta.url)` as specified in the [vite doc](https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url). – Chandan Aug 20 '21 at 03:30
  • Your suggestion worked @Chandan ! Put it in an answer and I'll accept it. `main: new URL('./client/index.html', import.meta.url).pathname,` – Michael Johansen Aug 21 '21 at 20:18

1 Answers1

4

Try using the URL for file input as specified in vite doc

main: new URL('./client/index.html', import.meta.url).pathname
Chandan
  • 11,465
  • 1
  • 6
  • 25