logo标签列表

Blazor服务器端是否有热重载功能？

c#blazorblazor-server-sideblazor-client-sideblazor-webassembly
54

我只有一个快速的问题。 是否有办法热重载Blazor应用程序？至少是 .razor 文件？ 现在我正在本地IIS上托管我的应用程序（不是IIS Express）。

我在互联网上搜索了一些内容，但没有找到有用的信息。

谢谢大家的回答 :)

9个回答
71

也许你可以尝试从命令提示符中运行你的应用程序：

dotnet watch run debug
1
非常感谢！它正在按照预期工作。祝你有美好的一天！ - cebilon123
我实际上必须将此与以下内容结合使用： <script> Blazor.defaultReconnectionHandler._reconnectCallback = function (d) { document.location.reload(); } </script> - D-Go
2
太棒了，这个功能运行得非常好。每当有变化时，它会自动重新加载页面 - 虽然不是完全无缝的，但已经非常接近了。 - Cornelius Roemer
这个方法可以用，但是只需按下F5键就有更好的解决方案。 - undefined
23

更新于 2021-11-10：

随着 Visual Studio 2022 的发布，热重载现在已经可以开箱即用。将您的项目升级至 .NET 6 可以获得最佳体验。

https://learn.microsoft.com/en-us/visualstudio/releases/2022/release-notes#NET-HotReload-170

更新于2021-04-09：

.NET 6预览版3的初始.NET Hot Reload支持。

在launchSettings.json中的启动配置文件中添加"hotReloadProfile": "aspnetcore"属性。对于Blazor WebAssembly项目，请使用“blazorwasm”热重载配置文件。

使用dotnet watch运行项目。

您可以在文档中找到受支持代码编辑的列表。

https://devblogs.microsoft.com/aspnet/asp-net-core-updates-in-net-6-preview-3/#initial-net-hot-reload-support

感谢 @Quango 指出这个问题。

更新 2020-04-09：

我已经在 _Host.cshtml 中添加了以下代码，而不是使用 browser-sync，代码如下：<script src="_framework/blazor.server.js"></script>

<environment include="Development">
    <script>
        window.Blazor.defaultReconnectionHandler.onConnectionDown = function () {
            setTimeout(function () {
                location.reload();
            }, 7000);
        }
    </script>
</environment>

虽然不是最优的解决方案，但由于您需要少一个http服务器，因此它的效果更好。如果您仍然想看到消息Attempting to reconnect to the server...和Could not reconnect to the server. Reload the page to restore functionality.，也可以使用_reconnectCallback。

window.Blazor.defaultReconnectionHandler._reconnectCallback = function (d) {
    document.location.reload();
}

https://thijstijsma.nl/2020/02/18/blazor-server-hot-reload/ https://dev59.com/_VIH5IYBdhLWcg3wZtXI#59807998

翻译：

据正在开发 Blazor 项目的 @danroth27 表示，.NET 5 计划于2020年11月实现热重载功能。

https://github.com/dotnet/aspnetcore/issues/5456#issuecomment-584219488

正如@MauricioAtanache所说，您可以使用dotnet watch，但不要忘记添加要监视的文件。例如：

dotnet watch --project BlazorTest.Server run

BlazorTest.Server.csproj 文件：

<ItemGroup>
    <Watch Include="..\**\*.razor" />
    <Watch Include="..\**\*.scss" />
    <Watch Include="..\**\*.cs" />
</ItemGroup>

然而，这并不是真正的热重载，因为它会重新启动服务器，但您必须在浏览器中手动刷新。如果您添加了新文件，则还需要编辑现有文件才能进行重新加载。

为了解决这个问题，我喜欢使用设置为代理到您的 Web 应用程序的 browser-sync。

示例：

browser-sync start --proxy https://localhost:5001/ --files '**/*.razor,**/*.cshtml, **/*.css, **/*.js, **/*.htm*'

https://weblog.west-wind.com/posts/2019/May/18/Live-Reloading-Server-Side-ASPNET-Core-Apps

还有一个由 @martasp 在 Github 上发布的项目，名为 BlazorLiveReload，旨在处理 Blazor Live Reload 而无需刷新页面。

来自作者的介绍：

它使用 Razor 引擎版本 3 将组件编译为 C# 类。 然后使用 Roslyn 编译器将这些类编译为程序集。 最后，我使用反射从程序集中加载 app.razor 组件， 并使用 Steve Sanderson 的测试主机修改库将组件转换为纯 HTML。为了实时提供 HTML 文件，我使用 WebSockets 进行全双工通信。

我自己没有测试过这个项目，所以无法说它的表现如何。

https://github.com/martasp/BlazorLiveReload

关于这个问题的一般讨论：

https://github.com/dotnet/aspnetcore/issues/5456

似乎.NET 5不会发布热重载功能：https://github.com/dotnet/aspnetcore/issues/5456#issuecomment-666728638 - mvdgun
2
热重载对我来说无法使用这些方法。不过稍作调整就可以了。从 Powershell 运行 2 个窗口：1. dotnet watch run，2. browser-sync start --proxy https://localhost:5001/ --files 'bin/Debug/netstandard2.1/BlazorApp.dll'。如果没有这个，browser-sync 触发得太早，会错过更改。 - axon
@axon 这太棒了 - 它能用，谢谢！ - Faredoon
进一步更新：.NET 6.0 预览版 3 现在可以正确启用热重载。 - Quango
如何使用热重载调试客户端？ - Alex Kovanev
7

Thijs Tijsma的文章对我很有帮助。

你需要在Visual Studio下不使用调试器运行（在Visual Studio中按CTRL + F5）。

在Pages\_host.cshtml中添加以下内容：

<script src="_framework/blazor.server.js"></script>

<!-- Make sure you place it after the include for blazor.server.js -->

<environment include="Development">
    <script src="~/Scripts/HotReload.js"></script>
</environment>

然后只需要重新加载js文件：wwwroot\scripts\HotReload.js

window.Blazor.defaultReconnectionHandler.onConnectionDown = function ()
{
    window.location.reload();
};
5

只需使用 CTRL + F5（不附加调试器）启动项目，进行更改并重新加载页面即可。

3

痛苦的历史

目前还没有真正好的解决方案可以自动重新编译已更改的部分并尽可能节省时间，例如“编辑和继续”。另一个令人沮丧的事实是，自2018年以来就有一个开放问题。他们承诺将在.NET 6中最终解决此问题。我们将看看这是否更有价值，因为在社区的压力下，他们已经承诺在2020年初为.NET 5提供解决方案。大约六个月后，他们不得不告诉大家他们无法在v5中发布所有内容。

使用调试的变通方法

哪些方法不起作用

运行dotnet watch run是一件好事，但是当您想要使用调试器时，它会受到限制。即使使用dotnet watch run debug，我也无法使其正常工作以附加Visual Studio到进程中，以便达到断点。我还尝试让VS在launchSettings.json中使用以下配置项运行dotnet watch run debug:

"WatchDebug": {
  "commandName": "Executable",
  "executablePath": "dotnet.exe",
  "commandLineArgs": "watch run debug",
  "workingDirectory": "$(ProjectDir)",
  "launchBrowser": false,
  "environmentVariables": {
    "ASPNETCORE_ENVIRONMENT": "Development"
  }
}

当文件被更改时，进程会启动并重新启动，但没有触发断点。即使使用 dotnet run -c debug 也是如此。

后来我在VS中找到了一个看起来不错的设置，但没有效果，即使使用IIS Express也是如此：

enter image description here

我发现的唯一调试解决方法

在_Host.cshtml中注入您的配置

@inject IWebHostEnvironment env

在 blazor.server.js 后添加以下调用。
@if (env.EnvironmentName != "Production") {
    <script>
        window.Blazor.defaultReconnectionHandler.onConnectionDown = function () {
            console.log('reloading')
            window.location.reload();
        };
    </script>
}

现在在launchSettings.json中创建一个调试配置，不要启动浏览器，因为这会让你在每次更改时单击要测试的页面，我们希望避免这种情况。
"MyProjectWithoutBrowser": {
  "commandName": "Project",
  "environmentVariables": {
    "ASPNETCORE_ENVIRONMENT": "Development"
  },
  "dotnetRunMessages": "true",
  "applicationUrl": "http://localhost:5000"
}

确保在开发期间仅将环境变量设置为Debug，否则设置为Production。打开给定URL上的浏览器。如果您选择了该配置并应用了更改，请按[Ctrl] + [Shift] + [F5]。这将重新启动调试器，然后浏览器重新连接并显示更改。在一个Hello World Blazor Server应用程序中，大约需要3-4秒钟。

2
现在，LiveSharp（https://www.livesharp.net）支持有状态的Blazor热重载。
你可以在这里看到它的工作原理：https://www.youtube.com/watch?v=MCh5-44UBpM。
LiveSharp是一款商业工具，可以让你在运行时更新C#代码。
免责声明：我是作者。
18
需要说明的是，这是一项每月收费的服务，费用在9.90欧元至19欧元之间，具体取决于个人或商业使用情况。 - Ogglas
现在它是免费的（并且开源）。 - Stephen Angell
1
添加
<ItemGroup>
    <Watch Include="..\**\*.razor" />
    <Watch Include="..\**\*.scss" />
    <Watch Include="..\**\*.cs" />
</ItemGroup>

将此代码添加到您的 .csproj 文件中，然后运行：
dotnet watch run debug

这不是你期望的热重载，但它可以自动化重新运行的过程。你只需要等待几秒钟并重新加载页面即可。
0

使用 dotnet 6.0
在 Tasks.json 中添加一个新的部分，如下所示，并将其命名为例如 watchRunBuild
(这是 build 的副本，但我在 args 参数中添加了 watch 和 Run，如下所示 :

  {
        "label": "watchRunBuild",
        "command": "dotnet",
        "type": "process",
        "args": [
            "watch",
            "run",
            "build",
            "${workspaceFolder}/BlazorTest.csproj",
            "/property:GenerateFullPaths=true",
            "/consoleloggerparameters:NoSummary"
        ],
        "problemMatcher": "$msCompile"
    }

在 launch.json 文件中，
将 preLaunchTask 改为 watchRunBuild，如下所示：

 "preLaunchTask": "watchRunBuild"
0

我遇到了一个问题，即VS告诉我“此错误是意外的。您的调试过程可能已损坏，建议重新启动它。”

我在服务器上使用了responsecompression。在开发中禁用它解决了我的问题。

我的解决方案示例：

builder.Services.AddResponseCompression(options =>
{
    options.EnableForHttps = true;
    options.Providers.Add<GzipCompressionProvider>();
});

builder.Services.AddSwaggerGen();

var app = builder.Build();

if (app.Environment.IsDevelopment())
{
    app.UseWebAssemblyDebugging();

    app.UseSwagger();
    app.UseSwaggerUI();

}
else
{
    app.UseExceptionHandler("/Error");
    app.UseHsts();
    app.UseResponseCompression();
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接