You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何正确将.razor文件纳入NuGet包?

解决NuGet包中包含Blazor单文件组件的问题

我的NuGet包包含三类内容:常规C#类、Components目录下与razor文件合并的分部C#类,以及SVG_Icons目录下的单文件组件,目录结构如下:
项目目录结构

默认打包时,Components、Exceptions、Helpers这三个目录会被自动纳入NuGet包,但SVG_Icons目录(仅含单文件组件)不会被包含。我尝试添加了以下配置,但效果不理想——C#会把.razor文件当作普通.cs文件编译,并没有正确处理Blazor组件:

<ItemGroup>
  <Compile Include="SVG_Icons/**/*.razor" />
</ItemGroup>

下面是SVG图标单文件组件的示例代码:

@using YamatoDaiwa.Frontend.Components.Abstractions


@implements ISupportsFlexibleExternalCSS_ClassesSpecifyingForRootElement


<svg
  xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 20 20"
  class=@(((ISupportsFlexibleExternalCSS_ClassesSpecifyingForRootElement)this).rootElementSpaceSeparatedExternalCSS_Classes)
>
  <path d="M10 0a10 10 0 1010 10A10 10 0 0010 0zM8.47 14.74l-.09-.09-4.05-4.05 1.22-1.23 2.92 2.91 5.89-5.9 1.23 1.23z"></path>    
</svg>


@code {

  [Microsoft.AspNetCore.Components.Parameter]
  public string? rootElementModifierCSS_Class { get; set; } = null;

  [Microsoft.AspNetCore.Components.Parameter]
  public string[]? rootElementModifierCSS_Classes { get; set; } = null;

  [Microsoft.AspNetCore.Components.Parameter]
  public string? rootElementSpaceSeparatedModifierCSS_Classes { get; set; } = null;

}

正确配置步骤

要让NuGet包正确包含并处理Blazor单文件组件,需要替换原有的Compile配置,改用Blazor专用的项类型,并确保组件编译产物被正确打包:

  1. 替换编译配置
    移除原来的<Compile>节点,添加以下配置,让MSBuild用Blazor的编译逻辑处理.razor文件:
<ItemGroup>
  <RazorComponent Include="SVG_Icons/**/*.razor" />
</ItemGroup>
  1. 确保项目启用Blazor组件支持
    如果你的项目是类库,需要在项目文件中确认已启用Blazor相关配置(以.NET 8为例):
<PropertyGroup>
  <TargetFramework>net8.0</TargetFramework>
  <Nullable>enable</Nullable>
  <RazorLangVersion>8.0</RazorLangVersion>
  <AddRazorSupportForMvc>true</AddRazorSupportForMvc>
</PropertyGroup>
  1. 验证打包结果
    执行打包命令后,可用NuGet包浏览器打开生成的.nupkg文件,检查SVG_Icons相关的编译产物是否已被包含。

额外说明

  • 不要用Compile处理.razor文件:.razor需要经过Razor编译器生成对应的组件类,而非当作普通C#代码编译。
  • 若组件依赖CSS、JS等静态资源,需额外添加<None>或<Content>配置将这些资源纳入NuGet包。

内容的提问来源于stack exchange,提问作者Takeshi Tokugawa YD

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.03 05:35:23