修改Blazor应用路径后Blazor-State模块加载失败求助

问题概述 #

修改Blazor WebAssembly应用的默认路径为/app/后，应用可正常运行，但安装Blazor-State包后启动失败。原因是应用错误地从带/app前缀的路径请求Blazor-State的JS模块，导致服务器返回404：

• 错误请求路径：https://localhost:xxxx/app/_content/Blazor-State/js/blazor-state.lib.module.js
• 正确资源路径：https://localhost:xxxx/_content/Blazor-State/js/blazor-state.lib.module.js

复现步骤 #

• 创建新的Blazor WebAssembly应用，执行以下修改：
  1. 修改index.html：

     <base href="/app/" />
     <script src="/app/_framework/blazor.webassembly.js"></script>
     

  2. 在客户端项目文件中添加：

     <StaticWebAssetBasePath>app</StaticWebAssetBasePath>
     

  3. 修改服务器项目Main方法中的路由配置：

     app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/app"), first =>
     {
         first.UseBlazorFrameworkFiles("/app");
         first.UseStaticFiles();
     
         first.UseRouting();
         first.UseEndpoints(endpoints =>
         {
             endpoints.MapControllers();
             endpoints.MapFallbackToFile("app/{*path:nonfile}", "app/index.html");
         });
     });
     

解决方案 #

方案1：添加URL重写规则 #

在服务器项目的Main方法中，添加URL重写规则，将带/app/_content前缀的请求转发到正确的/_content路径。此方法无需修改Blazor-State的配置，仅需在现有服务器配置中添加：

// 放在路由配置之前
app.UseRewriter(new RewriteOptions()
    .AddRewrite(@"^app/_content/(.*)", @"_content/$1", skipRemainingRules: true));

该规则会将所有/app/_content/xxx格式的请求重写为/_content/xxx，服务器即可正确找到Blazor-State的嵌入式资源。

方案2：手动引入JS模块并禁用自动加载 #

如果Blazor-State支持手动引入JS模块，可通过以下步骤处理：

1. 在index.html中手动添加正确路径的JS引用：

   <script src="/_content/Blazor-State/js/blazor-state.lib.module.js"></script>
   

2. 注册BlazorState时，禁用自动JS模块加载（需参考Blazor-State文档确认配置项）：

   builder.Services.AddBlazorState(options =>
   {
       options.DisableAutoJSModuleLoading = true; // 假设存在此配置项
   });
   

方案3：调整静态资源路由配置 #

在服务器的MapWhen块内，添加针对/app/_content路径的静态资源映射，指向正确的资源目录：

app.MapWhen(ctx => ctx.Request.Path.StartsWithSegments("/app"), first =>
{
    // 新增：映射/app/_content到/_content的静态资源
    first.UseStaticFiles(new StaticFileOptions
    {
        RequestPath = "/app/_content",
        FileProvider = new ManifestEmbeddedFileProvider(
            typeof(Program).Assembly, "_content")
    });

    first.UseBlazorFrameworkFiles("/app");
    first.UseStaticFiles();

    first.UseRouting();
    first.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
        endpoints.MapFallbackToFile("app/{*path:nonfile}", "app/index.html");
    });
});

推荐方案 #

优先选择方案1，它实现简单，无需修改客户端代码或依赖库配置，仅通过服务器端重写即可解决路径匹配问题，兼容性最好。

内容的提问来源于stack exchange，提问作者user2953629