7

There are several ways to integrate a Vue project into a Spring Boot project.

Using webpack based build tools (e.g. vue-cli) I've successfully done it several times in the following way:

  • configure the outputDir of the build process such that its output is placed in e.g. /static/dist/ (finally) inside the Java class path of the Spring Boot project. This way these static assets can be served via the URL /dist/.... To have the correct URLs in the generated index.html the publicPath must of course be set to /dist/.
  • configure Vue Router using HTML5 mode (history mode) with some baseUrl not equal to / (was necessary in a large productive system) and not equal to /dist/ - let's say its baseUrl is equal to /vue/. Now, in Spring Boot, forward all requests matching /vue/** to /dist/index.html such that the Vue Router can take over handling the given URL.

This way I had no problems in production. And there was no difference in behaviour using the provided dev server in development mode - live reload (HMR) works as expected and also talking to the Spring Boot backend was unproblematic (of course a proxy must be configured for the dev server).

Using this setup (different baseUrls for the build process and for the Vue Router) with Vite seems to be perfectly fine in production mode! (at least I've had no problems up to now)

But in development mode I experience several problems with the built in dev server. Probably due to the different baseUrls I get, for example, the following message if I do a browser reload:

The server is configured with a public base URL of /dist/ - did you mean to visit /dist/vue/ instead?

Moreover I have problems to configure the proxy of the dev server. Specific URLs can be proxied quite simple but I don't know how to configure the proxy in a more generic way like I do it in webpack based builds (without destroying the live reload which initially works well in Vite).

All in all it's quite complex and difficult to explain. For this reason I created a very simple demo project in this github repository.

Comments, help and PRs are welcome! ;-)

2
  • What about using yarn ? Can you try with this command "yarn dev" to run the web server for development. Commented May 28, 2023 at 8:49
  • @RohìtJíndal yarn is used in the demo project, but that has nothing to do with the problem, the behaviour would be the same with npm, that makes no difference Commented Jun 1, 2023 at 18:57

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.