IApplicationBuilder.Map 破坏了 UseSpa 的功能（未找到捆绑包）[重复]答案

【问题标题】：IApplicationBuilder.Map breaks the functionality of UseSpa (bundle not found) [duplicate]IApplicationBuilder.Map 破坏了 UseSpa 的功能（未找到捆绑包）[重复]
【发布时间】：2020-11-27 10:34:28
【问题描述】：

我正在尝试制作一个应用程序，它可以通过一个后端托管两个 SPA。我已按照说明创建React app with .NET Core。这非常有效。

然后我将配置更改为start the .NET Core and React apps separately。也没问题。

但是，我尝试按照hosting multiple SPAs under different subroues 上的指南进行操作。突然间，我的脚本得到了 gettig 404：

这是我的Configure 方法：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseExceptionHandler("/Error");
        // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseStaticFiles();
    app.UseSpaStaticFiles();

    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller}/{action=Index}/{id?}");
    });

    app.Map("/reactapp", ra => {
        ra.UseSpa(spa =>
        {
            spa.Options.SourcePath = "ClientApp";

            if (env.IsDevelopment())
            {
                spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");
            }
        });
    });
}

各个 HTTP 调用似乎几乎相同，除了 /reactapp 路径。我究竟做错了什么？ .NET 端是否需要任何其他配置？或者我应该在 React 应用程序中更改某些内容（例如：在 React 路由器中）？

【问题讨论】：

可以分享一下你的客户端app文件夹结构吗？两个react app都在同一个文件夹里面ClientApp是哪个路径？通常，我们将创建两个中间件来将不同的客户端应用程序与其自己的路径相匹配，如answer 所示。
目前没有两个 React 应用。 ClientApp 文件夹中仍然只有一个应用程序，我没有对其进行任何更改。我所做的所有更改都在我的问题中进行了描述（使用UseProxyToSpaDevelopmentServer，然后使用app.Map("/reactapp", ...）

标签： c# reactjs asp.net-core

【解决方案1】：

其实这个问题here已经回答过了。我不知道为什么，但是搜索引擎上周没有向我提出这个问题……然后今天突然出现了。

所以完整的答案是：

将"homepage": "/reactapp/", 添加到package.json 文件中，例如：

{
  "name": "weatherapp",
  "version": "0.1.0",
  "private": true,
  "homepage": "/reactapp/",
   "dependencies": { ...

用方法调用替换整个 app.Map("/reactapp", ra => {... 部分，例如：ConfigureReactApp(app, env);
实现ConfigureReactApp 方法：

private void ConfigureReactApp(IApplicationBuilder app, IWebHostEnvironment env)
{
    var spaPath = "/reactapp";
    if (env.IsDevelopment())
    {
        app.MapWhen(y => y.Request.Path.StartsWithSegments(spaPath), client =>
        {
            client.UseSpa(spa => 
            {
                // spa.UseReactDevelopmentServer(npmScript: "start");
                spa.UseProxyToSpaDevelopmentServer("http://localhost:3000");
            });
        });
    }
    else
    {
        app.Map(new PathString(spaPath), client =>
        {
            client.UseSpaStaticFiles();
            client.UseSpa(spa => {});
        });
    }
}

【讨论】：