ASP.NET Core 2.1 - 如何提供多个Angular应用程序？

Question

我想从我的 .net core 服务中类似这样为2个Angular应用提供服务：

public void ConfigureServices(IServiceCollection services)
{
    ...

    services.AddSpaStaticFiles(configuration =>
    {
        configuration.RootPath = "wwwroot/app";
    });

    services.AddSpaStaticFiles(configuration =>
    {
        configuration.RootPath = "wwwroot/admin";
    });

    ...
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    ...

    app.UseSpaStaticFiles(new StaticFileOptions
    {
        OnPrepareResponse = ctx =>
        {
            ctx.Context.Response.Headers.Append("Cache-Control", "public,max-age=0");
        }
    });

    app.UseMvc();

    app.Map("/app", client =>
    {
        client.UseSpa(spa =>
        {
            spa.Options.SourcePath = "wwwroot/app";
        });
    }).Map("/admin", admin =>
    {
        admin.UseSpa(spa =>
        {
            spa.Options.SourcePath = "wwwroot/admin";
        });
    });
}

在文件系统中，我只拥有这些应用的dist输出（因为它们是由另一个团队开发的）。所以看起来像这样：

• C:[MY PROJECT PATH]\wwwroot\app
• C:[MY PROJECT PATH]\wwwroot\admin

但由于某种原因，管理应用程序可以工作，而应用程序无法工作，并且也不支持默认页面，因此我需要输入带有/index.html的URL。

您有任何解决此问题的想法吗？

- Liran Friedman

Answer 1

好的，我最终解决了它并且它的工作原理如下：

public void ConfigureServices(IServiceCollection services)
{
    ...

    services.AddSpaStaticFiles();

    ...
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    ...

    app.UseSpaStaticFiles(new StaticFileOptions
    {
        FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot"))
    });

    app.UseMvc();

    app.Map("/app", client =>
    {
        client.UseSpa(spa =>
        {
            spa.Options.SourcePath = "wwwroot/app";
            spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
            {
                FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/app"))
            };
        });
    }).Map("/admin", admin =>
    {
        admin.UseSpa(spa =>
        {
            spa.Options.SourcePath = "wwwroot/admin";
            spa.Options.DefaultPageStaticFileOptions = new StaticFileOptions
            {
                FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/admin"))
            };
        });
    });
}

此外，不要忘记进入每个应用程序的 index.html 文件，并按照以下方式设置 base 标签：

//for the client application:
<base href="/app/">

//for the admin application
<base href="/admin/">

- Liran Friedman

---

感谢您抽出时间发布答案。我猜这节省了我很多时间。 - BinarySolo

非常欢迎。我很高兴听到它对其他人也有用。 - Liran Friedman

在我的看法中，比这个更好的答案是因为它提到了base href。 - Chaim Eliyah

Answer 2

Liran回答了自己的问题。在我的情况下，我为vue cli站点设置了多个入口点。修复方法与正确答案相同，但还需设置spa.Options.DefaultPage。

    app
         .Map("/login", admin =>
         {
             admin.UseSpa(spa =>
             {
                 spa.Options.SourcePath = "ClientApp";
                 spa.Options.DefaultPage = "/login.html";
             });
         })
        .Map("", client =>
    {
        client.UseSpa(spa =>
        {
            spa.Options.SourcePath = "ClientApp";
            spa.Options.DefaultPage = "/index.html";
        });
    });

- MGDavies