在Microsoft.NET.Sdk类库项目中集成Blazor组件的可行性咨询

可以在目标框架为net7.0、基于NopCommerce的Microsoft.NET.Sdk类库项目中集成Blazor组件，但你的现有配置存在几处适配NopCommerce插件机制的问题，以下是修正后的配置方案：

1. 调整项目SDK与Razor组件编译配置 #

Microsoft.NET.Sdk类库默认不支持Razor组件编译，需将项目SDK替换为Microsoft.NET.Sdk.Razor，同时修正Razor文件的引用方式：

<Project Sdk="Microsoft.NET.Sdk.Razor">
    <PropertyGroup>
        <TargetFramework>net7.0</TargetFramework>
        <AssemblyName>Nop.Plugin.Test</AssemblyName>
        <RootNamespace>Nop.Plugin.Test</RootNamespace>
        <Company>Test</Company>
        <OutputPath>../../../../test/src/Presentation/Nop.Web/Plugins/Test.Web</OutputPath>
        <OutDir>$(OutputPath)</OutDir>
        <OutNopWeb>$(OutDir)\..\..</OutNopWeb>
        <CopyLocalLockFileAssemblies>true</CopyLocalLockFileAssemblies>
        <NoWarn>1701;1702;IL2121;NETSDK1138</NoWarn>
        <RazorLangVersion>7.0</RazorLangVersion>
    </PropertyGroup>
    
    <ItemGroup>
          <PackageReference Include="Microsoft.AspNetCore.Components" Version="7.0.0" />
          <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="7.0.0" />
    </ItemGroup>

    <ItemGroup>
        <!-- 引用项目内的所有Razor组件 -->
        <RazorComponent Include="**/*.razor" />
    </ItemGroup>
</Project>

2. 适配NopCommerce插件的Startup机制 #

NopCommerce插件通过INopStartup接口注入服务和配置中间件，而非普通的Startup类，需修改你的Startup实现：

using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Nop.Core.Infrastructure;

namespace Nop.Plugin.Test
{
    public class Startup : INopStartup
    {
        public void ConfigureServices(IServiceCollection services, IConfiguration configuration)
        {
            services.AddServerSideBlazor();
        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            app.UseEndpoints(endpoints =>
            {
                endpoints.MapBlazorHub();
            });
        }

        // 设置执行顺序，确保在Nop.Web的基础配置之后运行
        public int Order => 10;
    }
}

3. 布局与视图的正确配置 #

• Layout.cshtml：确保布局文件放置在插件的Views/Shared目录下，引用路径正确：

<base href="~/" />
<script src="_framework/blazor.server.js"></script>

• Index.cshtml：确认组件命名空间正确，且组件已被编译到插件程序集中：

@(await Html.RenderComponentAsync<Nop.Plugin.Test.Web.Themes.Views.Shared.RazorComponents.Component>(RenderMode.ServerPrerendered, new { Data = " Hello World " }))

额外注意事项 #

• 插件编译后需确保所有依赖文件（包括Blazor相关的程序集）都复制到Nop.Web的Plugins目录下，CopyLocalLockFileAssemblies=true配置可保证这一点。
• 验证NopCommerce版本是否适配Net7.0，避免框架版本冲突。

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