Vite React应用部署到Quarkus后路由出现404错误求助

我通过以下命令创建Vite React应用：

npx create-vite my-app --template react

App.jsx中定义的路由配置如下：

function App() {
  return (
   <Router>
    <Header/>
    {/* <TemporaryDrawer/> */}
    <Routes>
      <Route path='/' Component={Home}/>
      <Route path='Home' Component={Home}/>
      <Route path="/regestrieren" Component={SignUp}/>
      <Route path="/anmelden" Component={SignIn}/>
      <Route path="/404" element={<PageNotFound />} />
      <Route path="*" element={<Navigate to="/404" replace />} />

      <Route path='Inventar' Component={Inventory}/>
      <Route path='Bestellungen' Component={Order}/>
      <Route path='Status' Component={State}/>
      <Route path='test' Component={SocketTest}/>
    </Routes>
    {/* <Footer/> */}
   </Router>
  )
}

export default App

执行vite build后生成的dist目录结构：

|-assets
  ->|index-D5iAeLHF.css
  ->|index-DFJTsdp1.js
|-images
|index.html

按照Quarkus官方指引，将dist目录内容复制到src\main\resources\META-INF\resources路径下。运行Quarkus开发模式时，React应用首页可正常显示，但所有自定义路由均返回404，仅Quarkus的REST接口能正常响应。

已尝试的配置：

1. vite.config.js：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
  plugins: [react()],
   base: '/',
  server: {
    host: '0.0.0.0',
    port: 9001
  }
})

2. application.properties新增配置：

quarkus.http.port=9000
quarkus.http.root-path=/
quarkus.http.cors=true
quarkus.http.cors.origins = http://localhost:9001
quarkus.http.cors.headers = accept, origin, authorization, content-type, x-requested-with
quarkus.http.cors.methods = GET,PUT,POST,DELETE,OPTIONS

补充信息：

• 整个应用已打包为Docker容器
• 容器运行在Nginx反向代理之后

核心问题是Quarkus未配置SPA路由 fallback：当直接访问React路由（如/Inventar）时，Quarkus会优先查找对应静态资源或后端接口，找不到则返回404，不会将请求转发给index.html让React Router处理。

1. 配置Quarkus的SPA Fallback #

修改application.properties，添加SPA路由转发规则：

# 让所有未匹配到静态资源/接口的请求 fallback 到index.html
quarkus.http.single-page-application.paths=/*
quarkus.http.single-page-application.index-page-path=/index.html

2. 确认React Router类型 #

确保使用BrowserRouter而非HashRouter（后者会通过URL哈希值处理路由，虽能规避后端问题，但不符合常规URL结构）。替换Router导入：

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

3. Nginx反向代理补充配置（若需） #

如果Nginx存在路径重写问题，需添加try_files规则确保前端路由请求转发到Quarkus：

location / {
    proxy_pass http://你的quarkus容器地址:9000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;

    # 处理SPA路由，找不到资源时转发到index.html
    try_files $uri $uri/ /index.html;
}

验证步骤 #

1. 重新构建Vite应用：vite build
2. 复制dist内容到Quarkus的META-INF/resources目录
3. 重启Quarkus应用
4. 直接访问/Inventar等路由，确认页面正常加载

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