Solution to the problem of page blanking in Spring Boot deployment

The popular solution online is to change assetsPublicPath: '/' to './'. Here are the disadvantages of this solution:

Usually, most of the problems with page blank are caused by Spring Boot configuration -path, the context changes the access path of css, js and other files, and the file cannot be loaded, resulting in blank display. '/' to './' is to change the absolute path to a relative path, which can dynamically adapt to changes in the Spring Boot side context, which is why this solution works.

Another common problem that occurs when Vue project deployment in Spring Boot is that when refreshing the browser, the white label, that is, the 404 error occurs. The solution is basically to configure the error page to Vue.

Where there is a conflict between these two solutions. When the router appears, refresh the browser. The error page will point to the Vue page. At this time, the path to access the css and js file in the page is the relative path, that is, the context path + router subpath, which will cause css and js to not load normally again. This is the disadvantage of the relative path.

Since routers will have subpaths, it is necessary to ensure that assetsPublicPath is an absolute path. Let’s talk about the solution to keep absolute paths:

1 Suppose Spring Boot configuration -path: api, and the assetsPublicPath: '/' is changed to '/api/' in /config/ of Vue.

2 Configure base in router/: '/api/', which ensures that the context parameters and router jump path are consistent when the browser refreshes.

3 For Ajax requests, you need to configure the baseURL. If you use Axios, you can use the following method to configure it.

// http request interceptor(
config => {
if (('id_token')) {
 = ('id_token')
}
 = '/api'
return config
},
err => {
return (err)
})

4 Another thing to note is that according to the default configuration of Spring Boot, assetsSubDirectory: 'static' should be changed to other characters in Vue/config/, such as: 'content', 'vue', 'api', etc.

5 I tried to configure assetsSubDirectory as empty, it conflicts with another css image loading solution. The image loading solution is to add a line of configuration in /build/

// Extract CSS when that option is specified
// (which is the case during production build)
if () {
return ({
use: loaders,
fallback: 'vue-style-loader',
publicPath: '../../'
})

At the end, the code that points the error page to Vue on the Spring Boot side:

import org.;
 import org.;
 import ;
 import ;
 import ;
 import ;
 import ;
 import ;
 @Configuration
 public class ServletConfig {
   private static final Logger logger = ();
   @Bean
   public WebServerFactoryCustomizer<ConfigurableWebServerFactory> webServerFactoryCustomizer() {
     ("come to 404 error page");
     return factory -> {
       ErrorPage error404Page = new ErrorPage(HttpStatus.NOT_FOUND, "/");
       (error404Page);
     };
  }
 }

Summarize:

The above is the solution to the problem of page blanking in Spring Boot that the editor introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!