Problems with Vite's dev server in a setup with Vue and Spring Boot as backend

[drahkrub]

Hi, I successfully integrated Vue frontends in several Spring Boot projects using webpack based builds. Now I would like to switch to Vite + Vue. Everything seems to run perfectly fine with production builds but I experience some problems when using Vites dev server. Some of them may have to do with the fact that I provide different baseUrls for the build process and for the Vue Router - e.g. doing a browser reload produces the message

The server is configured with a public base URL of [...] - did you mean to visit /[...]/[...]/ instead?

in the browser. Moreover I fail to configure the proxy of the dev server such that live reload still works and the communication to the Spring Boot backend works.

All things that worked with webpack's dev server for years without any problems. Of course the problem must be me, so any help is appreciated. ;-)

Since all this stuff is not easy to explain I created a github repo with a very simple Spring Boot demo project containing two frontends - one build with vue-cli, the other one with vite.

As I said in a question on SO which I also created: Comments, help and PRs are welcome!

[drahkrub]

second try in discussion #14514

[marcusvramos]

Hi! Spring Boot integration with Vite requires some specific configuration. Here's how to fix your issues:

1. Base URL Configuration

In vite.config.js:

export default {
  base: process.env.NODE_ENV === 'production' ? '/your-app/' : '/',
  server: {
    port: 3000,
  }
}

In your Vue Router:

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [...]
})

2. Proxy Configuration (for dev server)

export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
      }
    }
  }
}

This should preserve HMR while proxying backend requests.

3. Spring Boot Configuration

Make sure your controller handles SPA routing in production:

@Controller
public class ForwardController {
    @GetMapping(value = "/{path:[^\\.]*}")
    public String forward() {
        return "forward:/";
    }
}