'Can't render view with contextPath /foo (Vue.js.+ Spring Boot)

I have an application based on Vue.js at front-end and Spring Boot at back-end.

My production app isn't in the root of the server and it is a sub-path in localhost:8090/ui. Here is my application.yml:

server:
  port: 8090
  servlet:
    contextPath: /ui

I set assetsPublicPath: '/ui' in config/index.js so all my references in index.html are like /ui/static/...

According to Google Chrome, my production server successfully returns all my static assets, like localhost:8080/ui/static/images/example.png but I can't see my UI for some reason. enter image description here

As I've implemented my front-end as a single page application, I configured my server, using WebAutoConfig to redirect all to index.html like this:

@Configuration
public class WebAutoConfig implements WebMvcConfigurer {
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/")
                .setViewName("forward:/index.html");
    }
}

Also I use mode: 'history' property in router\index.js. Without it everything works fine, but I don't want ugly hashes in URL, like localhost:8090/ui/#/. Moreover, everything works fine even with history mode enabled, but without sub-path, i.e. contextPath: / enter image description here

Thank you

spring-bootvue.jswebpack


Solution 1:[1]

I had a similar problem. Setting the base property in my vite.config.js file helped. Set the base equal to the context path you specified in your spring boot config.

export default myConfig {
...
base: '/base/path/here/'
...

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 BigBadWolf

Related Questions