ASP.NET Core 5搭配webpack dev server报SPA默认页中间件错误如何解决

你遇到的报错本质是SPA中间件既无法在本地静态目录找到/index.html，代理转发到webpack-dev-server时也未能获取到对应资源，可按以下优先级排查修改：

核心配置错误点 #

1. Startup.cs的Spa SourcePath配置错误
   当使用代理模式时，SourcePath需要指向前端项目的根目录（即包含package.json的目录），而非构建产物目录dist。如果你的package.json与.csproj文件同目录，将对应配置修改为：

opts.Options.SourcePath = "./";

如果你需要.NET自动启动webpack-dev-server，还需在package.json的scripts节点中添加启动命令：

"scripts": {
  "start": "webpack serve"
}

2. webpack-dev-server协议不匹配
   你在Startup中配置的代理地址是https://localhost:8080，但webpack-dev-server 4.x版本默认使用http协议启动，未显式配置https的情况下会出现连接失败。二选一修正即可：

• 方案1：将Startup中的代理地址改为http://localhost:8080
• 方案2：在webpack.config.js的devServer节点添加https配置：

devServer: {
  server: 'https', // 新增该行启用https服务
  hot: true,
  historyApiFallback: true,
  static: {
    directory: path.resolve(__dirname, "wwwroot"),
    publicPath: "/",
  }
}

3. HtmlWebpackPlugin注入配置问题
   你当前配置了inject: false，webpack不会自动将构建后的JS资源注入到生成的index.html中，需手动在模板index.html中添加资源引用：

<script src="/dist/main.js"></script>

如果不需要手动控制注入位置，可直接删除inject: false配置，使用默认的自动注入逻辑。

验证步骤 #

修改配置后先单独启动webpack-dev-server，直接访问对应的服务地址（http://localhost:8080或https://localhost:8080），确认可以正常加载index.html后再启动.NET后端服务即可。

内容的提问来源于stack exchange，提问作者Józef Podlecki