Multiple entry points, dev server and and vue-router with createWebHistory

[ammojamo]

When I use vue-router with createWebHistory (i.e. HTML5 history instead of hash-based history) with a single entry point, the dev server will helpfully serve my index.html for any sub-path of the application. For example, if my app is being served from http://localhost:3000/app, I can browse directly to http://localhost:3000/app/some/route and the dev server knows to ignore the "/some/route" part of the URL and serve my index.html. Then vue-router picks up the "some/route" part of the URL and shows the right content - perfect!

However, this doesn't seem to work if I configure multiple entry points in vite.config.js, i.e.:

rollupOptions: {
      input: {
        page1: resolve(__dirname, 'page1/index.html'),
        page2: resolve(__dirname, 'page2/index.html')
      }
    }

If I browse to https://localhost:3000/page1/some/route, the dev server returns a 404 instead serving page1/index.html and letting vue-router do its thing.

Is there a way to solve this? I've been trying to dive into the source code to work out how the dev server determines what to serve for a given URL, but haven't been able to figure it out yet.

[izmaylovn]

Hey! Did you find a workaround?

[ammojamo]

Not really – I ended up splitting my app into two completely separate Vue apps and running two separate dev servers. This turned out to be OK for my use case, but is not really a general solution to the problem in this discussion.

[raythurnvoid]

Another alternative that avoids nginx is just using vite as middleware: https://vitejs.dev/config/server-options.html#server-middlewaremode

I'm actually doing that by wrapping Vite in Express

	const vite = await createViteDevServer(project); // This use createServer from "vite", project is a variable that I use to identify the various apps I want to create

	const baseUrl = vite.config.base;

	// use vite's connect instance as middleware
	app.use(baseUrl, (req, res, next) => {
		if (res.headersSent) {
			// If we already sent a response to the client from Express, vite should not be called, otherwise it will throw an error
			next();
		} else {
			vite.middlewares(req, res, next);
		}
	});

[tilleps]

Appears to be working for me on vite@4.2.1:

rollupOptions: {
  input: {
    page1: resolve(__dirname, "index.html"),
    page2: resolve(__dirname, "page2/index.html")
  }
}

import { createRouter, createWebHistory } from "vue-router";

const router = createRouter({
  history: createWebHistory("/page2"),
  routes: []
});

Weird issue for me is that breaks if I move the index.html for the page1 input

[shawnchong]

I just ran into this problem, and it's very annoying. So sad....

[FlorianWendelborn]

https://github.com/emosheeep/vite-plugin-virtual-mpa worked for me