blazor 服务器端是不是有任何热重载？

Posted 2023-02-15

【中文标题】blazor 服务器端是不是有任何热重载？

【英文标题】：Is there any hot reload for blazor server-side?blazor 服务器端是否有任何热重载？

【发布时间】：2019-09-30 17:55:22

【问题描述】：

我只有一个简短的问题。 有没有办法热重新加载 Blazor 应用程序？至少，.razor 文件？ 现在我将我的应用程序托管在本地 IIS（不是 IIS express）上。

我浏览了互联网，但没有发现任何有用的信息。

谢谢大家的回复:)

【参考方案1】：

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

dotnet watch run debug

【讨论】：

非常感谢！它正在按应有的方式工作。祝你有美好的一天！

我实际上必须结合使用它：

是的，这很好用。只要有变化，它就会自动重新加载页面 - 不是完全无缝的，但几乎就在那里。

【参考方案2】：

2021 年 11 月 10 日更新：

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

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

2021-04-09 更新：

对 .NET 6 Preview 3 的初始 .NET 热重载支持

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

使用dotnet watch 运行项目。

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

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

感谢@Quango 指出。

2020 年 4 月 9 日更新：

我没有使用browser-sync，而是在_Host.cshtml<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://***.com/a/59807998/3850405

原文：

根据从事 Blazor 项目的 @danroth27 的说法，计划在 2020 年 11 月对 .NET 5 进行热重载。

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>

然而，它不是 true 热重载，因为它会重新启动服务器，但您必须在浏览器中进行手动刷新。如果添加新文件，您还需要在重新加载之前编辑现有文件。

为了解决这个问题，我喜欢使用 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 组件 反射并与史蒂夫桑德森测试主机修改库 I 将组件转换为纯 HTML。为了实时提供 HTML 文件，我使用了 WebSockets 进行全双工通信。

我自己没有测试过这个项目，所以我不能说它的效果如何。

https://github.com/martasp/BlazorLiveReload

关于该问题的一般线程：

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

【讨论】：

看起来热重载功能不会随 .NET 5 一起提供：github.com/dotnet/aspnetcore/issues/5456#issuecomment-666728638

热重载对我来说不适用于这些方法。一些调整让它工作。从 Powershell 运行 2 个窗口：1.dotnet watch run，2.browser-sync start --proxy https://localhost:5001/ --files 'bin/Debug/netstandard2.1/BlazorApp.dll'。如果没有这个，浏览器同步会过早触发并错过更改

@axon 这太棒了——它有效，谢谢！

进一步更新：.NET 6.0 Preview 3 现在可以正确启用热重载

如何使用热重载调试客户端？

【参考方案3】：

Thijs Tijsma 有一个对我有用的post。

您必须在没有附加调试器的情况下运行 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();
;

【参考方案4】：

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

【参考方案5】：

疼痛史

目前还没有真正好的解决方案可以自动重新编译更改的部分并尽可能节省时间，例如编辑并继续。另一个可悲的事实是，there is an open issue about it 自 2018 年以来（！）。他们承诺最终用 .NET 6 解决这个问题。我们会看看这是否值得更多，因为在社区的压力下，他们already promised a solution in the beginning of 2020 for .NET 5。大约 6 个月后，他们不得不告诉 they couldn't make it to release after all for 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。

Then I found a setting in VS which looks good，但没有效果，甚至在使用 IIS Express 时也没有：

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

将您的配置注入_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 秒。

【参考方案6】：

LiveSharp 现在支持有状态的 Blazor 热重载 (https://www.livesharp.net)

你可以在这里看到它的工作原理：https://www.youtube.com/watch?v=MCh5-44UBpM

LiveSharp 是一个商业工具，可让您在运行时更新 C# 代码。

免责声明：我是作者

【讨论】：

应该提一下，根据个人/商业用途，每月费用在 9.90 欧元到 19 欧元之间。

【参考方案7】：

添加

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

到你的 .csproj 然后运行：

dotnet watch run debug

这不是您可能期望的热重载，但它会自动执行重新运行过程。您只需等待几秒钟并重新加载页面。

【参考方案8】：

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

  
        "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"