Глубокие ссылки на стороне клиента с WebpackDevMiddleware 404s - PullRequest
Новая
       23

Глубокие ссылки на стороне клиента с WebpackDevMiddleware 404s

9 голосов
/ 12 мая 2019

Я использую сборки WebpackDevMiddleware for Development для обслуживания приложения Vue.js, которое использует маршрутизацию на стороне клиента.Приложение SPA обслуживается из корневого URL-адреса просто отлично, но если я попытаюсь использовать какие-либо глубокие ссылки на стороне клиента, я получу 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" });
          });
        });
    }
  }
}

1 Ответ

3 голосов
/ 15 мая 2019

Мне удалось обойти это, используя промежуточное программное обеспечение кодовых страниц состояния для обработки всех кодов состояния и повторного выполнения с использованием корневого пути.Это приведет к тому, что приложение spa будет обслуживаться для всех кодов состояния в диапазоне 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"])
  });
}

Надеюсь, это поможет кому-тов будущем это может натолкнуться на эту проблему.

...