WebpackDevMiddleware 404s的客户端深层链接

Question

我正在使用WebpackDevMiddleware for Development构建来提供使用客户端路由的Vue.js应用程序。可以从根URL很好地提供SPA应用程序，但是如果我尝试使用任何客户端深层链接，则会得到404。

请注意，按预期方式按生产运行。

我想要的是：

• http://locahost/ -提供vue应用。
• http://localhost/overlays/chat -提供vue应用。
• http://localhost/api/* -提供服务器端处理的api路由。

在该存储库中，该问题的最低限度可行复制。您可以在发生错误的开发环境中使用vscode调试来运行它。还有一个脚本/scripts/local-production将在生产环境中构建并运行，并在此环境中按预期工作。

我的Startup.cs的相关部分如下所示：

public class Startup
{
  public IConfiguration Configuration { get; }

  public Startup(IConfiguration configuration)
  {
    Configuration = configuration;
  }

  public void ConfigureServices(IServiceCollection services)
  {


    services.AddMvc();

    // In production, the Vue files will be served
    //  from this directory
    services.AddSpaStaticFiles(configuration =>
    {
        configuration.RootPath = Configuration["Client"];
    });
  }

  public void Configure(IApplicationBuilder app, IHostingEnvironment env)
  {

    //set up default mvc routing
    app.UseMvc(routes =>
    {
      routes.MapRoute("default", "api/{controller=Home}/{action=Index}/{id?}");
    });

    //setup spa routing for both dev and prod
    if (env.IsDevelopment())
    {
      app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {
          HotModuleReplacement = true,
          ProjectPath = Path.Combine(env.ContentRootPath, Configuration["ClientProjectPath"]),
          ConfigFile = Path.Combine(env.ContentRootPath, Configuration["ClientProjectConfigPath"])
      });
    }
    else
    {
      app.UseWhen(context => !context.Request.Path.Value.StartsWith("/api"),
        builder => {
          app.UseSpaStaticFiles();
          app.UseSpa(spa => {
            spa.Options.DefaultPage = "/index.html";
          });

          app.UseMvc(routes => {
            routes.MapSpaFallbackRoute(
                name: "spa-fallback",
                defaults: new { controller = "Fallback", action = "Index" });
          });
        });
    }
  }
}

Answer 1

我能够使用状态代码页中间件处理所有状态代码并使用根路径重新执行来解决此问题。这将导致水疗应用程序为 400-599 范围内的所有状态代码提供服务，这不是我想要的，但至少让我再次工作。

//setup spa routing for both dev and prod
if (env.IsDevelopment())
{
  //force client side deep links to render the spa on 404s
  app.UseStatusCodePagesWithReExecute("/");
  app.UseWebpackDevMiddleware(new WebpackDevMiddlewareOptions {
    HotModuleReplacement = true,
     ProjectPath = Path.Combine(env.ContentRootPath, Configuration["ClientProjectPath"]),
     ConfigFile = Path.Combine(env.ContentRootPath, Configuration["ClientProjectConfigPath"])
  });
}

希望这对将来可能遇到此问题的人有所帮助。