Asp net core and SPA (VUE): SPA 默认页面中间件无法返回默认页面'/index.html'答案

【问题标题】：Asp net core and SPA (VUE): The SPA default page middleware could not return the default page '/index.html'Asp net core and SPA (VUE): SPA 默认页面中间件无法返回默认页面'/index.html'
【发布时间】：2021-06-17 20:37:04
【问题描述】：

在 asp net core 和 Visual Studio 2019 中，我从模板创建了一个 Vue 3 项目： https://marketplace.visualstudio.com/items?itemName=alexandredotnet.vuejsdotnetfive

在 Startup.cs 我有：

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

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
     if (env.IsDevelopment())
     {
         app.UseDeveloperExceptionPage();
     }

     app.UseRouting();
     app.UseSpaStaticFiles();
     app.UseAuthorization();

     app.UseEndpoints(endpoints =>
     {
         endpoints.MapControllers();
     });

     app.UseSpa(spa =>
     {
         if (env.IsDevelopment())
             spa.Options.SourcePath = "ClientApp/";
         else
             spa.Options.SourcePath = "dist";

         if (env.IsDevelopment())
         {
             spa.UseVueCli(npmScript: "serve");
         }

     });
    }

当我部署到 azure 时，我得到一个内部错误。所以我试图在我的笔记本电脑上以生产模式启动设置：

"ASPNETCORE_ENVIRONMENT": "Production"

在launchSetting.json 中。它创建了“dist”文件夹，如下图所示：

为什么会出现以下错误？？：

System.InvalidOperationException: The SPA default page middleware could not return the default page '/index.html' because it was not found, and no other middleware handled the request.
Your application is running in Production mode, so make sure it has been published, or that you have built your SPA manually. Alternatively you may wish to switch to the Development environment.


at Microsoft.AspNetCore.SpaServices.SpaDefaultPageMiddleware.<>c__DisplayClass0_0.<Attach>b__1(HttpContext context, Func`1 next)
at Microsoft.AspNetCore.Builder.UseExtensions.<>c__DisplayClass0_1.<Use>b__1(HttpContext context)
at Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware.TryServeStaticFile(HttpContext context, String contentType, PathString subPath)
at Microsoft.AspNetCore.StaticFiles.StaticFileMiddleware.Invoke(HttpContext context)
at Microsoft.AspNetCore.Builder.UseExtensions.<>c__DisplayClass0_2.<Use>b__2()
at Microsoft.AspNetCore.SpaServices.SpaDefaultPageMiddleware.<>c__DisplayClass0_0.<Attach>b__0(HttpContext context, Func`1 next)
at Microsoft.AspNetCore.Builder.UseExtensions.<>c__DisplayClass0_1.<Use>b__1(HttpContext context)
at Microsoft.AspNetCore.Routing.EndpointMiddleware.Invoke(HttpContext httpContext)
at Microsoft.AspNetCore.Authorization.AuthorizationMiddleware.Invoke(HttpContext context)
at Microsoft.AspNetCore.Server.IIS.Core.IISHttpContextOfT`1.ProcessRequestAsync()
Il thread 0x30e8 è terminato con il codice 0 (0x0).

【问题讨论】：

您的app.UseSpaStaticFiles() 呼叫看起来与我在扩展页面上看到的非常不同...

标签： asp.net azure vue.js asp.net-core single-page-application

【解决方案1】：

我遇到了同样的问题。这是我的解决方案：


var spaStaticFileOptions = new StaticFileOptions
{
  FileProvider = new Microsoft.Extensions.FileProviders.PhysicalFileProvider(System.IO.Path.Combine(env.ContentRootPath, "ClientApp/dist"))
};

app.UseSpaStaticFiles(spaStaticFileOptions);
app.UseSpa(spa =>
{
    if (IsDevelopment(env))
        spa.Options.SourcePath = "ClientApp/";
    else
    {
        spa.Options.DefaultPageStaticFileOptions = spaStaticFileOptions;
        //spa.Options.SourcePath = "dist";
    }

    if (IsDevelopment(env))
    {
        spa.UseVueCli(npmScript: "serve");
    }
});

bool IsDevelopment(IWebHostEnvironment env)
{
    return !IsProduction(env);
}
bool IsProduction(IWebHostEnvironment env)
{
    return prodEnvironments.Contains(env.EnvironmentName);
}

【讨论】：