Angular单页应用(SPA)部署Tomcat WAR的路由重定向问题求助

我来帮你搞定这个部署难题！你之前的配置问题在于/*的URL模式会捕获所有请求，包括静态资源（CSS、JS、assets里的文件），导致这些资源都被转发到index.html，自然无法正常加载。下面是两种可靠的解决方案，优先推荐第一种纯web.xml配置的方式：

方案一：通过Servlet映射优先级区分静态资源与路由请求 #

Tomcat自带的DefaultServlet就是专门处理静态文件的，我们只需要让它优先匹配静态资源路径，剩下的请求再交给Angular的index.html处理。修改你的web.xml如下：

<!-- 先配置静态资源的映射，让DefaultServlet优先处理 -->
<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.css</url-pattern>
    <url-pattern>*.js</url-pattern>
    <url-pattern>/assets/*</url-pattern>
    <!-- 根据你的静态资源类型补充，比如*.png、*.jpg、*.woff2等 -->
</servlet-mapping>

<!-- 配置处理Angular路由的Index Servlet -->
<servlet>
    <servlet-name>index</servlet-name>
    <jsp-file>/index.html</jsp-file>
</servlet>
<servlet-mapping>
    <servlet-name>index</servlet-name>
    <url-pattern>/</url-pattern>
</servlet-mapping>

原理说明： #

Servlet的URL匹配是有优先级的：精确匹配 > 路径匹配 > 扩展名匹配。上面的配置中，*.css、/assets/*这类更具体的模式会被先匹配，静态资源直接由DefaultServlet返回；而那些没有匹配到静态资源的请求（比如Angular的路由路径/user/details）会被/这个模式捕获，转发到index.html，让Angular的前端路由接管处理。

额外注意事项 #

• 确保Angular打包时的base href配置正确：如果部署在Tomcat根路径，打包命令用ng build --base-href /；如果是子路径（比如http://localhost:8080/myapp），则用ng build --base-href /myapp/，否则路由会出现跳转错误。
• 如果有其他静态资源类型，记得在DefaultServlet的映射中补充对应的扩展名或路径。

方案二：使用404错误页转发（备选） #

如果第一种方案不适用，也可以通过配置错误页，将404请求转发到index.html，但要注意确保静态资源的真实404不会被误转发：

<error-page>
    <error-code>404</error-code>
    <location>/index.html</location>
</error-page>

这种方式相对简单，但可能会把真正不存在的静态资源请求也转发到index.html，所以优先推荐方案一。

内容的提问来源于stack exchange，提问作者kalamar