为现有net6.0 ASP.NET Core应用添加BlazorWasm的问题与解决

问题场景 #

现有ASP.NET Core 6应用，尝试集成同版本的Blazor WebAssembly（非ASP.NET Core托管模式），按步骤操作后组件渲染正常但交互失效，且控制台报blazor.webassembly.js 404错误。

操作步骤 #

• 向解决方案添加新的Blazor WebAssembly项目（取消勾选「ASP.NET Core托管」）
• 注释掉Blazor WebAssembly项目Program.cs中的代码：builder.RootComponents.Add<App>("#app");
• 为现有ASP.NET Core应用添加Blazor WebAssembly项目的引用
• 为现有ASP.NET Core应用安装Microsoft.AspNetCore.Components.WebAssembly.Server NuGet包
• 在现有ASP.NET Core项目的Program.cs中添加以下代码：

if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Home/Error");
}
else
{
    app.UseWebAssemblyDebugging();
}

app.UseBlazorFrameworkFiles();
app.MapFallbackToFile("/wwwroot/index.html");
app.UseStaticFiles();

• 在现有ASP.NET Core应用的_Layout文件的head标签中添加：<script src="_framework/blazor.webassembly.js"></script>
• 在某一视图中添加Blazor组件：

<component type="typeof(Counter)" render-mode="WebAssemblyPrerendered" />

遇到的问题 #

Counter组件能正常显示，但「Click Me」按钮无交互，浏览器控制台提示blazor.webassembly.js请求返回404；手动复制_framework文件夹到wwwroot目录也无法解决。

解决方法 #

1. 修复环境变量配置：
   IIS Express的环境变量未设置为Development，导致app.UseWebAssemblyDebugging();未执行。将环境变量改为Development后，浏览器可正常获取blazor.webassembly.js文件。

2. 修正脚本路径：
   应用认证后的基础URL为/Landing，浏览器请求blazor.boot.json的地址变为http://localhost/Landing/blazor.boot.json，路径错误。将_Layout文件中的脚本地址修改为绝对路径：

   <script src="/Landing/_framework/blazor.webassembly.js"></script>
   

   修改后Blazor组件交互恢复正常。

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