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

Blazor中创建和引用RCL需确保.NET版本一致、正确配置静态资源路径及命名空间引用：创建时选匹配版本模板，WASM需手动注册程序集并引入\_content资源，Server则直接添加项目引用；组件使用前须@using声明。

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：确保 net8.0 与主项目匹配

在 Blazor WebAssembly 项目中引用 RCL

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

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

在 Blazor Server 项目中引用 RCL

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

网钛淘拍CMS(TaoPaiCMS) V1.60

2013年07月06日 V1.60 升级包更新方式：admin文件夹改成你后台目录名，然后补丁包里的所有文件覆盖进去。1.[新增]后台引导页加入非IE浏览器提示，后台部分功能在非IE浏览器下可能没法使用2.[改进]淘客商品管理 首页 列表页 内容页 的下拉项加入颜色来区别不同项3.[改进]后台新增/修改淘客商品，增加淘宝字样的图标和天猫字样图标改成天猫logo图标4.[改进]为统一名称，“分类”改

下载

• 右键主项目 → “添加项目引用” → 勾选你的 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 中的 区域注册路由，或确保主项目 Routes.razor 扫描到了 RCL 程序集（Server 模式下默认支持，WASM 需手动指定）
• 调试时可检查浏览器网络面板，看 _content/xxx/xxx.js 是否返回 404；也可在主项目输出目录里找 _content/ 文件夹是否存在对应内容

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