如何在现有.NET MAUI项目中添加Blazor页面并运行Counter示例页面

我刚在VS2022里的全新.NET MAUI项目（非Blazor模板）里折腾过添加标准Counter页面，踩了几个官方文档没明确提到的小坑，把亲测可行的完整步骤整理给你：

1. 先装必要的NuGet包 #

右键项目 → 管理NuGet程序包，搜索并安装Microsoft.AspNetCore.Components.WebView.Maui，一定要注意版本和你的项目.NET版本匹配（比如项目用.NET 7就装对应7.x版本的包）。

2. 配置MauiProgram.cs注册Blazor服务 #

打开MauiProgram.cs，在CreateMauiApp方法里加上Blazor相关的服务注册代码：

using Microsoft.AspNetCore.Components.WebView.Maui;

public static MauiApp CreateMauiApp()
{
    var builder = MauiApp.CreateBuilder();
    builder
        .UseMauiApp<App>()
        .ConfigureFonts(fonts =>
        {
            fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
            fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
        });

    // 注册Blazor WebView服务
    builder.Services.AddMauiBlazorWebView();
    // 开发环境开启Blazor调试工具（发布时可以删掉这段）
#if DEBUG
    builder.Services.AddBlazorWebViewDeveloperTools();
#endif

    return builder.Build();
}

3. 搭建Blazor页面的文件结构 #

在项目根目录创建这几个关键文件夹和文件：

• Pages文件夹：把你提供的Counter页面代码保存为Counter.razor放在这里
• wwwroot文件夹：用来放静态资源，里面建个css子文件夹，把Blazor默认的bootstrap.min.css和app.css放进去（可以从Blazor模板项目里复制，或者自己写简单样式）
• 项目根目录创建_Imports.razor：用来统一Blazor页面的命名空间引用，内容如下：

@using System.Net.Http
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using [你的项目命名空间]
@using [你的项目命名空间].Pages

替换掉[你的项目命名空间]为你实际的项目名称。

4. 修改MAUI页面作为Blazor的载体 #

打开MainPage.xaml（或者你想用来显示Blazor的页面），把原有内容替换成下面的代码，注意替换命名空间：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Maui;assembly=Microsoft.AspNetCore.Components.WebView.Maui"
             xmlns:local="clr-namespace:[你的项目命名空间].Pages"
             x:Class="[你的项目命名空间].MainPage">

    <blazor:BlazorWebView HostPage="wwwroot/index.html">
        <blazor:BlazorWebView.RootComponents>
            <!-- 把Counter页面绑定到index.html里的#app元素 -->
            <blazor:RootComponent Selector="#app" ComponentType="{x:Type local:Counter}" />
        </blazor:BlazorWebView.RootComponents>
    </blazor:BlazorWebView>

</ContentPage>

然后打开MainPage.xaml.cs，确保引用了Counter页面的命名空间：

using [你的项目命名空间].Pages;

namespace [你的项目命名空间];

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();
    }
}

5. 添加wwwroot/index.html入口文件 #

在wwwroot文件夹里创建index.html，这个是Blazor的入口页面，一定要加<base href="/">，否则路由会失效：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Counter</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/app.css" rel="stylesheet" />
    <!-- 这个base标签至关重要，不能漏 -->
    <base href="/" />
</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.webview.js"></script>
</body>
</html>

6. 跑起来测试 #

现在启动项目，不管是Android、iOS还是Windows平台，都应该能正常显示Counter页面，点击按钮计数会正常增加。

我踩过的坑提醒 #

• 忘记加<base href="/">：直接导致Blazor找不到页面，加载失败
• NuGet版本不匹配：比如项目用.NET 7却装了.NET 6的BlazorWebView包，会出现各种奇怪的编译错误
• 命名空间写错：XAML里的local命名空间或者代码里的引用没对应上，会报找不到Counter组件的错误

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