这种情况我之前也碰到过，大概率是开发服务器的配置没跟上SPA路由的需求，或者服务器默认把根目录当成静态文件目录来索引了。咱们一步步排查修复：

1. 先检查开发服务器的核心配置 #

这是最常见的原因——服务器没有把根请求指向你的SPA入口文件（比如public/index.html），反而开启了目录索引功能。

• 如果是Webpack项目：
  打开webpack.config.js，找到devServer配置项，确保包含以下设置：

  const path = require('path');
  
  module.exports = {
    // ...其他配置
    devServer: {
      // Webpack 5用static，Webpack 4及以下用contentBase
      static: {
        directory: path.resolve(__dirname, 'public') // 指向你的HTML入口所在目录
      },
      historyApiFallback: true, // 关键：让所有路由请求都返回index.html
      open: true,
      port: 8080
    }
  };
  

  这个配置会强制服务器把所有路由请求都返回你的入口HTML，而不是列出目录文件。

• 如果是Vue项目（Vue CLI）：
  打开vue.config.js，添加或修改以下配置：

  module.exports = {
    publicPath: '/',
    devServer: {
      historyApiFallback: true,
      // 如果是Vue Router用history模式，还可以加rewrites确保重定向正确
      rewrites: [
        { from: /^\/$/, to: '/index.html' }
      ]
    }
  };
  

  同时确保Vue Router的默认路由已经配置，比如：

  const router = createRouter({
    history: createWebHistory(),
    routes: [
      { path: '/', redirect: '/你的目标组件路径' }, // 比如'/home'
      // ...其他路由
    ]
  });
  

• 如果是React项目（Create React App）：
  首先确保public/index.html存在且路径正确。如果用的是BrowserRouter，需要在package.json里添加：

  "homepage": "/"
  

  如果是自定义Webpack配置，和上面Webpack项目的配置一致，开启historyApiFallback。

2. 检查服务器是否开启了目录索引功能 #

有些开发服务器默认会开启目录索引（比如http-server这类工具），如果你的启动命令是直接用这类工具打开项目根目录，就会出现这种情况。比如你如果用了http-server .，就会列出根目录文件，这时候要改成指向public目录：http-server public，或者换成框架自带的开发服务器（比如npm run serve/npm start）。

3. 验证路由配置的正确性 #

确保你的路由规则里，根路径/已经正确配置了重定向或组件渲染：

• 比如React Router：

  <Routes>
    <Route path="/" element={<Navigate to="/home" />} />
    <Route path="/home" element={<Home />} />
  </Routes>
  

• 如果根路径直接渲染组件，也要确保组件能正常加载，没有报错导致页面空白（有时候空白页会让人误以为是目录列表，但其实是组件没渲染）。

4. 清除缓存或用无痕模式测试 #

有时候浏览器缓存会保留旧的服务器响应，导致新配置不生效。可以按Ctrl+Shift+R强制刷新，或者用无痕模式打开页面测试。

如果以上步骤都试过还是没解决，可以看看终端里的服务器启动日志，有没有报错信息——比如入口文件路径写错了，或者路由配置有语法错误，这些都会导致服务器无法正确处理根请求。

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