WebpackDevMiddleware 404s的客户端深层链接 [英] Client Side Deep Links with WebpackDevMiddleware 404s
问题描述
我正在使用WebpackDevMiddleware for Development版本来提供使用客户端路由的Vue.js应用程序.可以从根URL提供SPA应用程序,但是如果我尝试使用任何客户端深层链接,则会得到404.
I am using the WebpackDevMiddleware for Development builds to serve up a Vue.js application that uses client-side routing. The SPA application is served up from the root url just fine, but if I attempt to use any client-side deep links, I get a 404.
Notes在Production正常运行时运行.
Note running as Production works as expected.
我想要什么:
-
http://locahost/
-提供vue应用. -
http://localhost/overlays/chat
-提供vue应用. -
http://localhost/api/*
-提供服务器端处理的api路由.
http://locahost/
- serve up the vue app.http://localhost/overlays/chat
- serve up the vue app.http://localhost/api/*
- serve up the api routes handled server side.
在该存储库中,对该问题的最小再现.您可以在发生错误的开发环境中使用vscode调试来运行它.还有一个脚本/scripts/local-production
将在生产环境中构建并运行,并在此环境中按预期工作.
There is a minimum viable reproduction of the problem in this repository. You can run it using vscode debugging as Development environment where the bug happens. There is also a script /scripts/local-production
that will build and run as Production environment, where it works as expected.
我的Startup.cs的相关部分如下所示:
Relevant portions of my Startup.cs looks like this:
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" });
});
});
}
}
}
推荐答案
我能够使用状态代码页中间件来处理此问题,以处理所有状态代码并使用根路径重新执行.这将导致为spa应用程序提供400-599范围内的所有状态代码,这不是我想要的,但至少可以让我再次工作.
I was able to get around this using the status code pages middleware to handle all status codes and re-execute using the root path. This will cause the spa app to be served up for all status codes in the 400-599 range which is not quite what I want but gets me working again at least.
//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"])
});
}
希望这将对将来可能遇到此问题的人有所帮助.
Hopefully, this will help someone in the future that might be bumping up against this issue.
这篇关于WebpackDevMiddleware 404s的客户端深层链接的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!