background

The packaging method I use so far:

  1. First of all bynpm run buildCommand to package front-end pages as static resources
  2. Copy the static resources to the /resources/static directory of the SpringBoot project

The problem

  1. According to the above way, can only be accessed through http://ip:port/index.html, then by clicking on the button/implement routing jump in the form of menu.
  2. After the system is successfully packaged and deployed, the user accesses the URL favorites page. Next time, the page will be blank

Cause: After a user accesses the URL, the vue-router redirects to the home page (/index) or login page (/login). In this case, the URL saved by the user on the current page is http://ip:port/login. As a result, the user cannot access the page

To solve

The backend configuration

Custom GlobalErrorController

Please refer to blog.csdn.net/qq_29684305… As well as ErrorMvcAutoConfiguration and BasicErrorController source rewritten code is as follows:

@Controller
@RequestMapping({"${server.error.path:${error.path:/error}}"})
public class GlobalErrorController extends AbstractErrorController {

    private static final Logger log = LoggerFactory.getLogger(GlobalErrorController.class);

    private final ErrorProperties errorProperties;

    public GlobalErrorController(ErrorAttributes errorAttributes, ServerProperties serverProperties) {
        super(errorAttributes);
        errorProperties = serverProperties.getError();
    }

    @Override
    public String getErrorPath(a) {
        return this.errorProperties.getPath();
    }
    
    /** * if a 404 error occurs, redirect the page to index.html and add the real routing address to the front desk ** /
    @RequestMapping(
            produces = {"text/html"})public ModelAndView errorHtml(HttpServletRequest request, HttpServletResponse response) {
        HttpStatus status = this.getStatus(request);
        Map<String, Object> model = Collections.unmodifiableMap(this.getErrorAttributes(request, this.isIncludeStackTrace(request, MediaType.TEXT_HTML)));
        response.setStatus(HttpStatus.FOUND.value());
        String routePath = ((String)model.get("path"));
        try {
            response.sendRedirect("/index.html? route="+routePath);
        } catch (IOException e) {
            log.error(Error redirecting to home page, error cause: {}",e.getMessage());
        }
        return null;
    }
    

    @RequestMapping
    public ResponseEntity<Map<String, Object>> error(HttpServletRequest request) {
        Map<String, Object> body = this.getErrorAttributes(request, this.isIncludeStackTrace(request, MediaType.ALL));
        HttpStatus status = this.getStatus(request);
        return new ResponseEntity(body, status);
    }

    private boolean isIncludeStackTrace(HttpServletRequest request, MediaType produces) {
        ErrorProperties.IncludeStacktrace include = this.getErrorProperties().getIncludeStacktrace();
        if (include == ErrorProperties.IncludeStacktrace.ALWAYS) {
            return true;
        } else {
            return include == ErrorProperties.IncludeStacktrace.ON_TRACE_PARAM ? this.getTraceParameter(request) : false; }}private ErrorProperties getErrorProperties(a) {
        return this.errorProperties; }}Copy the code

The front-end configuration

Source: thinking segmentfault.com/q/101000001…

router.afterEach((to, form) = > {
  // It is added to the rear navigation guard because the route will not be mounted until the Vue/vue-router is instantiated after the jump to index. HTML
  if (to.path === "/index.html") {
    // Get the actual route parameters
    var routePath = getQueryVariable("route");
    if (routePath) {
      / / URI decoding
      routePath = decodeURIComponent(routePath);
      // If the home page is redirected by default, the secondary route is not redirected
      if(routePath ! = ='/index.html') {
        router.replace(routePath);
      }
    }
  }

  NProgress.done()
})
Copy the code