如何为.NET MAUI Blazor混合项目移动端配置自定义起始页？

你的需求完全可行，以下是针对性的解决步骤：

1. 统一路由与组件结构，避免冲突 #

• 共享项目不要添加带@page "/"的路由组件，将路由起始点拆分到Web端和MAUI移动端各自的项目中，共享项目仅存放无路由的通用组件、布局、业务逻辑。
• Web端保留原有写法，通过@page "/"加载共享组件并指定渲染模式：

  @page "/"
  <MyAwesomeComponent @rendermode="RenderMode.InteractiveWebAssembly"/>
  

2. 修正MAUI移动端BlazorWebView配置 #

2.1 修复命名空间引用错误 #

XAML中的blazor命名空间写法错误，替换为标准引用：

xmlns:blazor="clr-namespace:Microsoft.AspNetCore.Components.WebView.Maui;assembly=Microsoft.AspNetCore.Components.WebView.Maui"

2.2 配置RenderMode与路由入口 #

要启用InteractiveWebAssembly渲染并加载布局，需将RootComponent指向共享项目的路由入口组件（而非直接业务组件）：

1. 在共享项目中创建App.razor作为路由中枢：

   <Router AppAssembly="@typeof(App).Assembly">
       <Found Context="routeData">
           <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
       </Found>
       <NotFound>
           <LayoutView Layout="@typeof(MainLayout)">
               <p>当前地址无内容</p>
           </LayoutView>
       </NotFound>
   </Router>
   

2. 移动端XAML中配置RootComponent指向该路由组件，并指定渲染模式：

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

2.3 确保HostPage包含必要脚本 #

移动端wwwroot/index.html（即你的myawesomehtmlpage.htm）必须包含Blazor初始化脚本：

<!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>My Awesome App</title>
    <base href="/" />
</head>
<body>
    <div id="app"></div>
    <script src="_framework/blazor.webview.js"></script>
</body>
</html>

3. 配置MAUI项目服务，启用交互性 #

在MAUI项目的Program.cs中添加Blazor相关服务：

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

// 添加Blazor WebView服务
builder.Services.AddBlazorWebView();
// 可选：添加调试工具
builder.Services.AddBlazorWebViewDeveloperTools();

var app = builder.Build();
app.Run();

4. 验证组件引用正确性 #

确保MAUI项目已添加共享项目的引用，且XAML中的命名空间与共享项目实际匹配：

xmlns:shared="clr-namespace:MyAwesomeNamespace.Shared;assembly=MyAwesomeAssembly"

（替换为你共享项目的真实命名空间和程序集名称）

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