如何将dotnet new blazor创建的应用迁移为Blazor WASM应用？

首先明确：dotnet new blazor 默认创建的是Blazor Server应用，它依赖ASP.NET Core后端运行，无法直接静态部署；而Blazor WASM是客户端应用，可打包为静态文件部署。以下是完整的迁移步骤：

1. 修改项目文件（.csproj） #

将原项目的SDK和依赖替换为WASM所需配置：

<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">

  <PropertyGroup>
    <TargetFramework>net8.0</TargetFramework> <!-- 匹配你当前的.NET版本 -->
    <Nullable>enable</Nullable>
    <ImplicitUsings>enable</ImplicitUsings>
    <BlazorWebAssemblyProject>true</BlazorWebAssemblyProject>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.0" />
    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.0" PrivateAssets="all" />
    <PackageReference Include="System.Net.Http.Json" Version="8.0.0" />
  </ItemGroup>

</Project>

• 移除原项目中所有Blazor Server相关的包（如Microsoft.AspNetCore.Components.Server）和ASP.NET Core后端依赖（如Microsoft.AspNetCore.App）

2. 调整文件结构 #

新增入口文件 #

创建wwwroot文件夹，并在其中添加index.html（WASM的静态入口）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>你的应用名称</title>
    <base href="/" />
    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <link href="[你的项目名称].styles.css" rel="stylesheet" />
</head>
<body>
    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
    <script src="_framework/blazor.webassembly.js"></script>
</body>
</html>

• 替换[你的项目名称]为实际项目名称（与.csproj中的AssemblyName一致）

调整路由组件 #

• 将原Routes.razor的内容迁移到App.razor中，原App.razor可保留为WASM标准结构（通常包含<CascadingAuthenticationState>和<Router>）：

  <CascadingAuthenticationState>
      <Router AppAssembly="@typeof(App).Assembly">
          <Found Context="routeData">
              <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
              <FocusOnNavigate RouteData="@routeData" Selector="h1" />
          </Found>
          <NotFound>
              <PageTitle>Not found</PageTitle>
              <LayoutView Layout="@typeof(MainLayout)">
                  <p role="alert">Sorry, there's nothing at this address.</p>
              </LayoutView>
          </NotFound>
      </Router>
  </CascadingAuthenticationState>
  

• 合并完成后可删除原Routes.razor文件

3. 重构Program.cs #

替换原Blazor Server的后端启动代码为WASM客户端启动逻辑：

using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
using [你的项目名称]; // 替换为实际项目命名空间

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

await builder.Build().RunAsync();

• 替换[你的项目名称]为实际命名空间，解决CS0246错误
• 添加Microsoft.AspNetCore.Components.WebAssembly.Hosting引用，解决CS0234错误

4. 调整_Imports.razor #

保留通用Blazor命名空间，移除Server专属引用，添加WASM所需命名空间：

@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using [你的项目名称]
@using [你的项目名称].Shared

• 移除如Microsoft.AspNetCore.Mvc、Microsoft.AspNetCore.Components.Server等Server相关命名空间

5. 清理冗余文件 #

删除Blazor Server专属文件：

• Pages/_Host.cshtml
• 若使用身份验证，需替换为WASM版身份验证逻辑（如引用Microsoft.AspNetCore.Components.WebAssembly.Authentication包）

完成以上步骤后，运行dotnet build和dotnet run即可启动Blazor WASM应用，构建产物会输出到bin/[配置]/[框架]/wwwroot，可直接作为静态文件部署。

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