如何使用 ASP.Net 核心在 host/app 路径提供 SPA

Question

我正在使用 Angular dotnet 模板，它利用了与 Spa 相关的扩展。

我需要做哪些更改才能在 localhost:5001/app 而不是 localhost:5001 提供 SPA？

Startup.cs 文件如下所示：

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.AspNetCore.SpaServices.AngularCli;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

namespace angular_dotnet
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllersWithViews();
            // In production, the Angular files will be served from this directory
            services.AddSpaStaticFiles(configuration =>
            {
                configuration.RootPath = "ClientApp/dist";
            });
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        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();
            // if (!env.IsDevelopment())
            // {
                app.UseSpaStaticFiles();
            // }

            app.UseRouting();

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

            app.UseSpa(spa =>
            {
                // To learn more about options for serving an Angular SPA from ASP.NET Core,
                // see https://go.microsoft.com/fwlink/?linkid=864501

                // spa.Options.SourcePath = "ClientApp";

                /* if (env.IsDevelopment())
                {
                    spa.UseAngularCliServer(npmScript: "start");
                } */
            });
        }
    }
}

Answer 1

为了完成这项工作，在删除整个文件中所有其他与 SPA 相关的扩展之后，我最终添加到 Startup.cs 底部的内容。

app.Map(new PathString("/app"), client =>
{       
    var clientPath = Path.Combine(Directory.GetCurrentDirectory(), "./ClientApp/dist");
    StaticFileOptions clientAppDist = new StaticFileOptions()
    {
        FileProvider = new PhysicalFileProvider(clientPath)
    };

         
    client.UseSpaStaticFiles(clientAppDist);
    
    client.UseSpa(spa =>
     {
         spa.Options.DefaultPageStaticFileOptions = clientAppDist;
     });                                       
});

如何使用 ASP.Net 核心在 host/app 路径提供 SPA

How to serve SPA at host/app path with ASP.Net Core

configuration

single-page-application

asp.net-core

angular