如何将现有Blazor Wasm项目用作Piral的应用壳实现微前端

核心依赖准备 #

你需要先给现有Blazor Wasm项目安装两个官方适配Nuget包：

• Piral.Blazor.Core：提供Piral和Blazor交互的核心能力
• Piral.Blazor.Server：处理微应用资源的加载和路由调度

注意：需要你的项目运行在.NET 6及以上版本，低版本框架不支持相关适配包

最小实现步骤 #

1. 修改Program.cs文件，注入Piral壳服务

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");
// 原有服务注册逻辑保留，新增以下代码
builder.Services.AddPiralShell(options =>
{
    // 配置全局共享状态，可根据业务需求调整
    options.DefaultState = new { UserInfo = default, GlobalConfig = default };
});

await builder.Build().RunAsync();

2. 替换根组件的路由外层为Piral壳组件，修改App.razor：

<PiralShell>
    <!-- 原有Blazor路由逻辑完全保留，Piral会自动接管微应用路由匹配 -->
    <Router AppAssembly="@typeof(App).Assembly">
        <Found Context="routeData">
            <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
        </Found>
        <NotFound>
            <p>页面不存在</p>
        </NotFound>
    </Router>
</PiralShell>

3. 测试微应用挂载
   你可以在任意Blazor页面中调用注册方法挂载测试微应用，示例代码：

@page "/"
@inject IPiralMicroAppService AppService

<button @onclick="LoadTestApp">加载测试微应用</button>
<div id="test-app-container"></div>

@code {
    private async Task LoadTestApp()
    {
        // 这里可以替换为你自己的微应用资源地址
        await AppService.LoadMicroAppAsync("test-app", "http://localhost:3000/manifest.json");
        await AppService.MountMicroAppAsync("test-app", "test-app-container");
    }
}

常见入门问题规避 #

• 不要修改Blazor默认的wwwroot/index.html入口文件结构，Piral适配层会自动注入所需的JS依赖，手动修改容易导致依赖加载失败
• 如果你的项目开启了CSP安全策略，需要把微应用的资源域名加入白名单，否则会出现跨域加载失败问题
• 初期调试时建议关闭Blazor的AOT编译，否则会大幅增加构建时间，影响调试效率

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