JHipster 4.13单体应用URL丢失/#/引发页面未找到错误求助

嗨，我来帮你搞定这个页面404的问题！你遇到的核心问题是从带#的Hash路由切换到不带#的HTML5 History路由后，前端路由和后端服务器的规则没匹配上——JHipster 4.13默认用Hash路由，一旦改成无#的模式，必须同时调整前后端配置，不然刷新页面或直接访问子路由就会出404。

可能的操作失误点及修复步骤 #

1. 前端路由配置没到位 #

在app-routing.module.ts里，你得确保已经正确切换到PathLocationStrategy：

• 首先要导入PathLocationStrategy和LocationStrategy
• 把RouterModule.forRoot的useHash设为false
• 注册PathLocationStrategy作为默认的位置策略

正确的配置应该是这样的：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LocationStrategy, PathLocationStrategy } from '@angular/common';

// 你的路由规则保持不变
const routes: Routes = [
  // ...你的路由配置
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: false })], // 这里必须设为false
  exports: [RouterModule],
  providers: [{ provide: LocationStrategy, useClass: PathLocationStrategy }] // 关键：注册HTML5路由策略
})
export class AppRoutingModule { }

如果你只改了URL显示，但没加这个provider或者useHash还是true，肯定会出问题。

2. 后端没配置路由 fallback #

当用户直接访问http://localhost:9000/xxx这种子路由时，浏览器会直接给后端发请求，但后端根本没有对应的API或静态资源，自然返回404。这时候得让Spring Boot把所有非API的请求都转发到index.html，交给Angular的前端路由处理。

找到项目里的WebConfigurer.java（或者对应的配置类），修改addResourceHandlers方法：

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/**")
            .addResourceLocations("classpath:/static/")
            .resourceChain(true)
            .addResolver(new PathResourceResolver() {
                @Override
                protected Resource getResource(String resourcePath, Resource location) throws IOException {
                    Resource requestedResource = location.createRelative(resourcePath);
                    // 如果请求的资源不存在，就返回index.html
                    return requestedResource.exists() && requestedResource.isReadable() ? requestedResource
                            : location.createRelative("index.html");
                }
            });
}

3. 开发环境的Webpack Dev Server配置 #

在开发模式下，JHipster用Webpack Dev Server跑前端，得开启historyApiFallback，让Dev Server把所有404请求转发到index.html。检查webpack.dev.js里的devServer配置：

devServer: {
  // ...其他已有的配置
  historyApiFallback: true, // 加上这个配置
}

4. 检查index.html的base href #

最后确认下src/main/webapp/index.html里有没有<base href="/">这个标签——HTML5路由模式必须要有这个，不然Angular没法正确解析路由路径。

验证步骤 #

1. 把上面的配置改完后，重启后端Spring Boot服务
2. 重启前端开发服务器（比如重新跑yarn start）
3. 测试访问子路由，比如http://localhost:9000/dashboard，看看还会不会出现404

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