在做了大量研究并阅读了大量微软文档之后，我能够在不同的框架（在我的例子中是淘汰赛 mvc）中在 blazor 之外运行单独的 blazor 组件，
首先，我在 Visual Studio 中针对 .net 5.0 初始化了一个新的 Blazor Webassmebly 项目。
为简单起见，让我们从 blazor 引导应用程序中获取计数器组件。
步骤 - 1 将要导出的组件导入为可重用组件，如下所示 -
第 2 步 - 修改 MainLayout.razor 以加载组件
第 3 步 - 这是至关重要的一步。在您的 Counter 组件中，您应该添加以下代码行，这里我们将使用 DotNetObjectReference 设置组件的引用
注入
@inherits LayoutComponentBase @inject IJSRuntime js
在您的组件代码部分 -
private int currentCount = 0;
private DotNetObjectReference<Counter> jsToDotNetBridgeReference;
protected override async Task OnInitializedAsync()
{
jsToDotNetBridgeReference = DotNetObjectReference.Create(this);
await js.InvokeVoidAsync("SetDotNetReference", jsToDotNetBridgeReference);
}
[JSInvokable]
private void IncrementCount()
{
currentCount++;
}
[JSInvokable] 标识符帮助 dotnet 将此函数识别为从 JavaScript 调用的东西。
Step - 4 修改 Program.cs 和 index.html
修改您的 index.html 并将您的 div id 更改为 counter
接下来修改您的 program.cs 以在 html 中查找计数器 id。
第 5 步 - 将 dotnetreference 设置为 javascript 窗口对象
在 index.html 的 script 标签下添加以下脚本 -
window.SetDotNetReference = function (pDotNetReference) {
DotNetReference = pDotNetReference;
}
这就是您在 blazor webassembly 应用程序上所要做的一切。
第 6 步 - 将您的 blazor 应用程序发布到文件夹。我现在使用默认位置。发布后，您将看到以下文件和文件夹，我们对 _framework 文件夹感兴趣。
发布完成后，将 _framework 文件夹复制到其他应用程序的根目录，如下所示 -
第 7 步 - 转到您想要的框架，现在我将使用淘汰赛 mvc 应用程序。
在您的 layout.cshtml 文件中添加对 blazor 库的引用，如下所示
<script src="~/_framework/blazor.webassembly.js" autostart="false"></script>
保留 autostart = false 是确保 Blazor 组件在不需要时不会加载的好方法。
第 8 步 - 创建 BlazorInterop.js
在您的框架项目中创建一个 js 文件，我喜欢将其命名为 BlazorInterop.js（可以是任何名称），然后在您的 layout.cshtml 中像这样引用它
<script src="~/BlazorInterop.js?" type="text/javascript"></script>
在 BlazorInterop.js 中，您将编写要从您的 blazor 应用程序中的主机应用程序执行的函数。像这样-
IncrementCounter = function () {
Blazor.start().then(()=> {
DotNetReference.invokeMethodAsync('IncrementCounter');
})
}
第 9 步 - 在layput.cshtml 中使用id=counter 创建一个div
创建一个 id=counter 的 div，这将有助于 blazor appp 识别它应该像这样种植组件的 div -
<div id="counter">
</div>
<button type="button" onClick="IncrementCounter"> Increment Counter </button>
为了从页面加载时立即查看 blazor 组件，设置 autostart=true 否则，如果您想按需加载组件，我在主机应用程序中添加了一个按钮，以表明您可以根据需要调用 blazor 函数一旦组件被加载。
在您的 blazor interop.js 中，Blazor.start 将启动 blazor 应用程序，然后 DotNetReference.invokeMethodAsync 将触发 blazor 内的函数，并且计数器应递增。
第 10 步 - 在 web.config 中的 mvc 应用程序中添加 mime 类型，以便像这样提供静态内容 -
<staticContent>
<remove fileExtension=".wasm"/>
<mimeMap fileExtension=".wasm" mimeType="application/wasm"/>
<remove fileExtension=".dat"/>
<mimeMap fileExtension=".dat" mimeType="application/dat"/>
<remove fileExtension=".br"/>
<mimeMap fileExtension=".br" mimeType="application/br"/>
<remove fileExtension=".gz"/>
<mimeMap fileExtension=".gz" mimeType="application/gz"/>
<remove fileExtension=".blat"/>
<mimeMap fileExtension=".blat" mimeType="application/blat"/>
<remove fileExtension=".pdb"/>
<mimeMap fileExtension=".pdb" mimeType="application/pdb"/>
<remove fileExtension=".dll"/>
<mimeMap fileExtension=".dll" mimeType="application/octet-stream"/>
<remove fileExtension=".json"/>
<mimeMap fileExtension=".json" mimeType="application/json"/>
</staticContent>
完成了！
启动您的淘汰赛应用程序，您将能够看到该组件。
这基本上是我们在 mvc 淘汰应用程序中加载 blazor 组件所需发生的事情，这种方法也应该适用于任何其他框架，但是我不确定是否添加 mime 类型以在诸如 angulr 之类的框架中提供静态内容，反应等，但我相信一定有某种方式。我没有研究过。
可能会遇到一些错误，因此我将留下一些我在整个过程中提到的文档。
从 JS 调用 .Net 方法
https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-dotnet-from-javascript?view=aspnetcore-6.0
从 .net 调用 JS 方法
https://docs.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-javascript-from-dotnet?view=aspnetcore-6.0
如何正确使用 blazor.start
https://docs.microsoft.com/en-us/aspnet/core/blazor/fundamentals/startup?view=aspnetcore-6.0
我花了很多时间来整理，这个特定的工作流程对我们很有效，并计划在月底发布生产版本。
这有助于我们在 Blazor 中为我们的应用程序开发新功能，从而在无需获取新资源的情况下推进新技术。