c# - 如何在现有 MVC 应用程序中在特定路径启用 Spa 中间件

Question

默认情况下，SPA 在站点根目录上启用。但是，我想将其移至特定路径，例如：http://localhost:port/frontend

//public void ConfigureServices(IServiceCollection services)
services.AddSpaStaticFiles(configuration =>
{
    configuration.RootPath = "ClientApp/dist/myApp";
});

//public void Configure(IApplicationBuilder app)
app.Map("/frontend", frontendApp =>
{
    frontendApp.UseSpaStaticFiles(new StaticFileOptions
    {
        RequestPath = "/frontend'
    });
    frontendApp.UseSpa(spa =>
    {
        spa.Options.SourcePath = "/ClientApp"; 
        if (Configuration.GetValue<bool>("UseAngularCliServer"))                     
        {
           spa.UseProxyToSpaDevelopmentServer("http://localhost:4200/");
        }
    });
});

当我在 /frontend 文件夹中运行 npm build 时，这将起作用，但是我在配置 UseProxyToSpaDevelopmentServer 时遇到了麻烦。它显示 index.html，但引用

http://localhost:port/vendor.js代替http://localhost:port/frontend/vendor.js

当我使用ng serve --base-href=/vnext/

对 localhost:port/frontend/vendor.js 的请求返回 index.html 的内容。

Answer 1

可能您应该使用frontendApp参数而不是app：

app.Map("/frontend", frontendApp =>
{
    frontendApp.UseSpaStaticFiles(new StaticFileOptions
    {
        //RequestPath = ??
    });
    frontendApp.UseSpa(spa =>
    {
        //spa.Options.DefaultPageStaticFileOptions.RequestPath = ??;
        spa.Options.SourcePath = "/ClientApp"; 
    });
});

Answer 2

对于请求http://localhost:port/frontend/vendor.js，我们需要指定--base-href，我建议您尝试以下脚本package.json：

"start": "ng serve --base-href=/frontend/ --serve-path=/ --live-reload-client=https://localhost:port/frontend/sockjs-node/",

对于另一种选择，您可以尝试以下代码Startup

        app.Map("/frontend", frontendApp =>
        {
            frontendApp.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 --  --base-href=/frontend/ --serve-path=/ --live-reload-client=https://localhost:44302/frontend/sockjs-node/");
                }
            });
        });