Question

我正在创建一个Web应用程序，在该Web应用程序中我将Vue用于前端，将Spring Boot用于后端。 Spring Boot在/和/index.html处提供index.html，但我也希望在其他URL上也提供它，例如/account，Vue的Router会依次检测到该URL，并将显示正确的页面。

此外，我还有一些其他URL，我不想提供index.html。它们都以/api开头，这就是Vue应用发送请求的地方。

任何帮助将不胜感激。谢谢。

Answer 1

您要执行的操作称为SPA（单页应用程序）。为了达到这个目的，您需要做两件事：

告诉vue-router使用HTML5历史记录推送：https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations
告诉SpringBoot当index.html找不到相关路由时为其提供服务。这是有关如何使用NoHandlerFoundException处理程序的良好指南：https://medium.com/@kshep92/single-page-applications-with-spring-boot-b64d8d37015d

我必须警告您：在步骤1中配置历史记录模式时，单击某些内容，看起来您的SPA已经正常运行（没有＃号）。当心，这是一种幻想。 Vue-router告诉浏览器url的外观，但是刷新页面时，服务器将返回404。您还必须配置步骤2。

Answer 2

因为在我的应用程序中，我的用户界面中并没有只有 VUE，所以在我的场景中不可接受之前建议的所有错误到 VUE index.html。

最后，我使用过滤器以另一种方式解决了（基本上这个想法是拦截所有不是我的 VUE UI 中使用的 css、js、图像等的 URL 并强制重定向）。就我而言，VUE URL 以“/context/kmobile/”开头：

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.stereotype.Component;
import org.springframework.web.filter.OncePerRequestFilter;

import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Component
public class Html5PathFilter extends OncePerRequestFilter {
    private static final Logger log = LoggerFactory.getLogger(Html5PathFilter.class);

    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain)
            throws ServletException, IOException {
        try {
            String path = request.getServletPath();
            if (!path.endsWith(".css") && !path.endsWith(".js") && !path.endsWith(".ico") && !path.endsWith(".html") &&
                !path.endsWith("/kmobile/")) {
//              log.info("YES, do redirect ->" + path);
                response.sendRedirect(request.getContextPath() + "/kmobile/index.html");
                return;
            } else {
//              log.info("NO, do redirect ->" + path);
            }
        } catch (Exception e) {
            log.debug("Error: {}", e.getMessage(), e);
        }

        //log.info("--> {}", request.getServletPath());
        filterChain.doFilter(request, response);
    }

    @Override
    protected boolean shouldNotFilter(HttpServletRequest request) {
        String path = request.getServletPath();
        boolean valid = path.startsWith("/kmobile");
//      if (valid) {
//          log.info("path: {} => {}", path, valid);
//      }
        return !valid;
    }
}

将几乎所有请求重定向到index.html

2 个答案: