Blazor中创建和引用RCL需确保.NET版本一致、正确配置静态资源路径及命名空间引用:创建时选匹配版本模板,WASM需手动注册程序集并引入\_content资源,Server则直接添加项目引用;组件使用前须@using声明。
Blazor 中创建和引用 RCL(Razor Class Library)项目,核心是让 UI 组件、静态资源(CSS/JS)、Razor 页面等能在多个 Blazor 应用间复用。操作不复杂,但细节容易出错,尤其在资源加载和命名空间引用上。
在解决方案中右键 → “添加” → “新建项目”,搜索 Razor Class Library,选择模板(注意 .NET 版本需与主 Blazor 项目一致,如都用 .NET 8)。默认会勾选 “支持 Razor 组件”,保持勾选即可。
创建后,你会看到:
- wwwroot/ 目录:放 CSS、JS、图片等静态文件
- Components/ 或根目录下的 .razor 文件:可复用的组件
- RazorClassLibrary.csproj:确保 与主项目匹配
WebAssembly 项目需要显式声明静态资源路径,并启用 RCL 的程序集扫描:
builder.Services.AddRazorComponents().AddInteractiveWebAssemblyComponents(); 后,追加 .AddAdditionalAssemblies(typeof(YourRclNamespace.Components.YourComponent).Assembly);
true (.NET 6+ 默认开启),并在主项目 index.html 的 中手动添加引用,例如:
@using YourRclNamespace.Components,然后直接写
Server 模式更简单,因为服务端能直接解析程序集:
@using YourRclNamespace.Components
_content/{RclName}/... 路由提供,无需额外配置(前提是 RCL 已正确打包静态资源)IJSRuntime.InvokeVoidAsync("yourFunction") 调用引用后组件不渲染?样式不生效?JS 报错?多半是这几个地方卡住了:
_content/MyRcl/ 中的 MyRcl 必须与 RCL 项目的程序集名(通常是项目名)完全一致@page,需在主项目的 App.razor 中的 区域注册路由,或确保主项目 Routes.razor 扫描到了
RCL 程序集(Server 模式下默认支持,WASM 需手动指定)_content/xxx/xxx.js 是否返回 404;也可在主项目输出目录里找 _content/ 文件夹是否存在对应内容基本上就这些。关键是版本对齐、路径准确、引用方式匹配宿主模型(Server/WASM)。做一次顺了,后面复用就非常轻量。