Blazor 创建和引用 RCL 项目的方法

来源：这里教程网时间：2026-02-21 17:36:24 作者：

Blazor 中创建和引用 RCL（Razor Class Library）项目，核心是让 UI 组件、静态资源（CSS/JS）、Razor 页面等能在多个 Blazor 应用间复用。操作不复杂，但细节容易出错，尤其在资源加载和命名空间引用上。

创建 RCL 项目

在解决方案中右键 → “添加” → “新建项目”，搜索 Razor Class Library，选择模板（注意 .NET 版本需与主 Blazor 项目一致，如都用 .NET 8）。默认会勾选 “支持 Razor 组件”，保持勾选即可。

创建后，你会看到：
- wwwroot/ 目录：放 CSS、JS、图片等静态文件
- Components/ 或根目录下的 .razor 文件：可复用的组件
- RazorClassLibrary.csproj：确保

<targetframework>net8.0</targetframework>

与主项目匹配

在 Blazor WebAssembly 项目中引用 RCL

WebAssembly 项目需要显式声明静态资源路径，并启用 RCL 的程序集扫描：

在主项目 Program.cs 中，调用
builder.Services.AddRazorComponents().AddInteractiveWebAssemblyComponents();
后，追加
.AddAdditionalAssemblies(typeof(YourRclNamespace.Components.YourComponent).Assembly);
把 RCL 的 wwwroot/ 内容自动合并到输出：在 RCL 的 .csproj 中确认有
<razorgenerateembeddedresources>true</razorgenerateembeddedresources>
（.NET 6+ 默认开启），并在主项目 index.html 的
中手动添加引用，例如：
<link href="_content/YourRclName/css/site.css" rel="stylesheet">
在主项目中使用组件时，加上
@using YourRclNamespace.Components
，然后直接写
<yourcomponent></yourcomponent>

在 Blazor Server 项目中引用 RCL

Server 模式更简单，因为服务端能直接解析程序集：

右键主项目 → “添加项目引用” → 勾选你的 RCL 项目 在 _Imports.razor 或具体页面顶部添加
@using YourRclNamespace.Components
RCL 中的 wwwroot/ 文件会自动通过
_content/{RclName}/...
路由提供，无需额外配置（前提是 RCL 已正确打包静态资源）若组件内用了 JS 互操作，确保 JS 文件放在 RCL 的 wwwroot/js/ 下，并在页面中用
IJSRuntime.InvokeVoidAsync("yourFunction")
调用

常见问题和关键点

引用后组件不渲染？样式不生效？JS 报错？多半是这几个地方卡住了：

RCL 和主项目的 .NET SDK 版本必须完全一致（比如都是 net8.0），否则编译通过但运行时报“找不到类型” 静态资源路径大小写敏感（尤其 Linux 部署时），
_content/MyRcl/
中的 MyRcl 必须与 RCL 项目的程序集名（通常是项目名）完全一致 RCL 中的组件如果用了
@page
，需在主项目的 App.razor 中的
<found></found>
区域注册路由，或确保主项目
Routes.razor
扫描到了 RCL 程序集（Server 模式下默认支持，WASM 需手动指定）调试时可检查浏览器网络面板，看
_content/xxx/xxx.js
是否返回 404；也可在主项目输出目录里找 _content/ 文件夹是否存在对应内容

基本上就这些。关键是版本对齐、路径准确、引用方式匹配宿主模型（Server/WASM）。做一次顺了，后面复用就非常轻量。