如何配置Electron.NET打包ASP.NET Core+React/TypeScript SPA解决404问题

一、修正ASP.NET Core的SPA服务配置 #

确保Program.cs中正确配置静态文件与SPA fallback路由，让ASP.NET Core能在Electron环境下正确提供SPA内容：

var builder = WebApplication.CreateBuilder(args);

// 注册静态文件服务（指向React构建产物目录）
builder.Services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "client-app/build";
});

var app = builder.Build();

// 启用静态文件服务
app.UseStaticFiles();
if (!app.Environment.IsDevelopment())
{
    app.UseSpaStaticFiles();
}

// 配置SPA路由
app.UseSpa(spa =>
{
    spa.Options.SourcePath = "client-app";

    if (app.Environment.IsDevelopment())
    {
        // 开发模式直接对接React Dev Server，跳过SpaProxy冲突
        spa.UseReactDevelopmentServer(npmScript: "start");
    }
});

app.Run();

二、调整Electron.NET窗口加载逻辑 #

在Program.cs中添加Electron初始化代码，根据环境加载对应URL：

using ElectronNET.API;
using ElectronNET.API.Entities;

var builder = WebApplication.CreateBuilder(args);
builder.Services.AddElectron();

var app = builder.Build();

// 其他中间件配置（路由、授权等）...

if (HybridSupport.IsElectronActive)
{
    // 创建Electron窗口
    var mainWindow = await Electron.WindowManager.CreateWindowAsync(new BrowserWindowOptions
    {
        Width = 1200,
        Height = 800,
        Show = false,
        WebPreferences = new WebPreferences
        {
            NodeIntegration = true,
            ContextIsolation = false
        }
    });

    mainWindow.OnReadyToShow += () => mainWindow.Show();

    // 区分开发/生产环境加载地址
    if (app.Environment.IsDevelopment())
    {
        mainWindow.LoadURL("http://localhost:3000"); // 直接加载React Dev Server
        mainWindow.WebContents.OpenDevTools();
    }
    else
    {
        mainWindow.LoadURL($"http://localhost:{HybridSupport.CallbackPort}"); // 加载ASP.NET Core服务地址
    }
}

app.Run();

三、修正.csproj配置，避免SpaProxy与Electron冲突 #

调整项目文件，让SpaProxy仅在非Electron环境生效，同时确保Electron打包时能正确构建SPA：

<PropertyGroup>
    <!-- 原有配置保留，为SpaProxy添加生效条件 -->
    <SpaProxyServerUrl Condition="'$(ElectronNETBuild)' != 'true'">http://localhost:3000</SpaProxyServerUrl>
    <SpaProxyLaunchCommand Condition="'$(ElectronNETBuild)' != 'true'">npm start</SpaProxyLaunchCommand>
</PropertyGroup>

<!-- 添加Electron打包前的SPA构建步骤 -->
<Target Name="ElectronEnsureSpaBuild" BeforeTargets="ElectronBuild" Condition=" '$(Configuration)' == 'Release' ">
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
    <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />
</Target>

四、调试端口冲突排查 #

• 确认client-app/package.json中start命令使用3000端口（默认配置即可）：

  "scripts": {
      "start": "react-scripts start",
      // ...其他脚本
  }
  

• 运行electronize start前，关闭占用3000、8000、8001端口的进程。

五、验证步骤 #

1. 单独启动React Dev Server：cd client-app && npm start，确认http://localhost:3000正常访问。
2. 单独启动ASP.NET Core项目，确认http://localhost:5181能通过SpaProxy加载React内容。
3. 运行electronize start，检查Electron窗口是否正常加载内容。

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