在保存 Blazor WASM 时重新编译 .razor 文件

Question

有没有办法让 Blazor Webassembly 在 .razor 文件被更改/更新然后保存时重新编译它们？我已经习惯了在传统的 ASP.NET Core MVC 剃须刀视图以及像 Angular 这样的客户端框架中发生这种情况。 在 ASP.NET Core MVC >3.0 中，类似 services.AddRazorPages().AddRazorRuntimeCompilation(); 可以解决问题，但对于 Blazor，我找不到任何东西。

当我需要停止整个应用程序并重新启动它以查看最新更改时，这很烦人。默认情况下，新 Blazor 应用程序的 Main 方法看起来像

        public static async Task Main(string[] args)
        {
            var builder = WebAssemblyHostBuilder.CreateDefault(args);
            builder.RootComponents.Add<App>("app");

            builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });

            await builder.Build().RunAsync();
        }

我在这里缺少什么？ Blazor WASM 还没有吗？如果这是一个解决方案，我愿意接受像 dotnet watch dotnet build 这样的小技巧。

Answer 1

从 .NET 5.0 和 VS 16.8.1 开始，它看起来不像在 Angular 或 React 项目中那样内置 HMR，您可以在其中更改代码并让它刷新浏览器。

根据我找到的信息，此功能计划用于 .NET 6，但有解决方法可以使其正常工作，虽然有点麻烦，但确实有效。

如果您使用 dotnet watch --project "{PathToServer}/{YourServerProject}.csproj" run 运行 .NET 项目，而不是开始调试或按 F5，它将监视项目文件中的任何更改，包括 .razor 文件并重新编译它们。

到目前为止，浏览器将显示一条消息，说明它与服务器的连接已丢失，并且似乎没有重新建立连接。您需要手动刷新浏览器，任何更改都会显示，但您将丢失任何应用程序状态。

他们现在拥有的最好的，see this thread for more info

Answer 2

.net 6 中正在添加支持：https://www.telerik.com/blogs/instant-feedback-is-here-introducing-hot-reload-in-dotnet-6

Answer 3

试试这个简单的解决方案：-

在 IIS express 上使用 Ctrl + F5（不带调试器）而不是 F5 运行项目。一旦 .cs 和 .razor 文件被更改并在整个解决方案中保存，它们会自动重建并重新启动应用程序，因此只需刷新浏览器即可看到更改。

Answer 4

一位老师帮我解决了这个问题，如下所示。有两种选择：

1-) 在 Visual Studio 2019 中不使用调试模式：

• 点击工具> 选项 -> 项目和解决方案 -> ASP .NET Core -> 在“自动构建和刷新选项”下选择“保存更改后自动构建和刷新浏览器”
• 现在浏览器会在您进行更改时自行更新，但要使其正常工作，每次运行应用程序时，您必须通过按 Ctrl + F5（不调试启动）或单击“调试”-> 在不调试的情况下运行它不调试就开始 重要提示：只有在不调试的情况下运行才有效

要在调试模式下使用，您可以尝试以下操作：

2-) 在项目的 launchSettings.json 文件中包含一个包含以下数据的配置文件：

1.   "Watch": {
2.        "commandName": "Project",
3.        "launchBrowser": true,
4.        "launchUrl": "http://localhost:5000/",
5.        "commandLineArgs": "watch run",
6.        "workingDirectory": "$(ProjectDir)",
7.        "executablePath": "dotnet.exe",
8.        "environmentVariables": {
9.          "ASPNETCORE_ENVIRONMENT": "Development"
10.       }
11.     }

接下来，在调试模式下运行应用程序时，从 Visual Studio 菜单中选择配置文件 Watch。 注意：这样您将运行 dotnet watch 调试工具。

Marcoratti 教授在以下课程中发送的解决方案：https://www.udemy.com/course/curso-blazor-essencial/learn/lecture/17573912#questions/15161620/