.NET 8 Maui中无index.html时BlazorWebView配置问题

针对你遇到的.NET 8 Blazor无index.html、不知道如何配置BlazorWebView的问题，直接给你明确的配置步骤和代码：

1. 处理 HostPage：手动创建宿主页面 #

.NET 8 Blazor虽然用App.razor替代了原有的启动页，但MAUI的BlazorWebView还是需要一个HTML宿主文件。你只需要在MAUI项目的wwwroot目录下新建一个index.html，内容如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Blazor MAUI Integration</title>
    <base href="/" />
</head>
<body>
    <div id="app"></div>
    <script src="_framework/blazor.webview.js"></script>
</body>
</html>

然后保持HostPage="wwwroot/index.html"即可，这个文件是BlazorWebView加载Blazor内容的必要载体。

2. Selector 属性配置 #

Selector要和你刚才创建的index.html里的容器ID对应，也就是#app——因为我们在页面里定义了<div id="app"></div>，Blazor会把根组件渲染到这个容器中，所以直接用Selector="#app"就没问题。

3. ComponentType 属性配置 #

.NET 8 Blazor的根组件是App（对应App.razor文件），而不是旧版本的Routes。你需要先在MAUI项目里添加对Blazor项目的引用，然后在XAML页面顶部引入Blazor项目的命名空间：

xmlns:blazor="clr-namespace:你的Blazor项目命名空间;assembly=你的Blazor项目程序集名称"

之后把ComponentType设置为{x:Type blazor:App}，这样BlazorWebView就会加载你的Blazor项目的根组件。

完整XAML代码示例 #

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:blazor="clr-namespace:YourBlazorApp;assembly=YourBlazorApp"
             x:Class="YourMauiApp.MainPage">

    <BlazorWebView x:Name="blazorWebView" HostPage="wwwroot/index.html">
        <BlazorWebView.RootComponents>
            <RootComponent Selector="#app" ComponentType="{x:Type blazor:App}" />
        </BlazorWebView.RootComponents>
    </BlazorWebView>

</ContentPage>

额外提醒 #

• 确认MAUI项目已经正确引用了Blazor项目：右键MAUI项目→添加→项目引用，勾选你的Blazor项目。
• 如果Blazor项目有静态资源（CSS、JS等），要确保这些资源能被MAUI项目访问到，要么复制到MAUI的wwwroot，要么通过Blazor项目的资源设置正确加载。

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