用于 ASP.NET Core Blazor 的工具
注意
此版本不是本文的最新版本。 对于当前版本，请参阅此文的 .NET 8 版本。
本文介绍用于在各种平台上构建 Blazor 应用的工具。 在本文顶部选择你的平台。
若要在 Windows 上创建 Blazor 应用，请使用以下指南：
安装带有“ASP.NET 和 Web 开发”工作负载的最新版本 Visual Studio。
使用可用的 Blazor 模板之一创建新项目：
- Blazor Web 应用：创建支持交互式服务器端呈现（交互式 SSR）和客户端呈现 (CSR) 的 Blazor Web 应用。 建议使用 Blazor Web 应用模板开始 Blazor 入门来了解服务器端和客户端 Blazor 功能。
- Blazor WebAssembly 独立应用：创建可部署为静态站点的独立客户端 Web 应用。
选择下一步。
安装带有“ASP.NET 和 Web 开发”工作负载的最新版本 Visual Studio。
创建新项目：
- 对于 Blazor Server 体验，请选择 Blazor Server 应用模板，其中包括演示代码和 Bootstrap，或者没有演示代码和 Bootstrap 的 Blazor Server 应用空模板。 选择下一步。
- 对于独立的 Blazor WebAssembly 体验，请选择 Blazor WebAssembly 应用模板，其中包括演示代码和 Bootstrap，或者没有演示代码和 Bootstrap 的 Blazor WebAssembly 应用空模板。 选择下一步。
安装带有“ASP.NET 和 Web 开发”工作负载的最新版本 Visual Studio。
创建新项目：
- 若要获得 Blazor Server 体验，请选择“Blazor Server 应用”模板。 选择“下一步”。
- 若要获得 Blazor WebAssembly 体验，请选择“Blazor WebAssembly 应用”模板。 选择“下一步”。
- 提供“项目名称”，并确认“位置”正确无误。
对于“其他信息”对话框中的 Blazor Web 应用：
“交互式呈现模式”下拉列表
- 默认情况下，交互式服务器端呈现（交互式 SSR）是通过“服务器”选项来启用的。
- 要仅启用与客户端呈现 (CRS) 的交互性，请选择“WebAssembly”选项。
- 要同时启用交互式呈现模式和在运行时自动切换它们的功能，请选择“自动（服务器和 WebAssembly）”（自动）呈现器模式选项。
- 如果将交互性设置为
None，则生成的应用不具有交互性。 应用仅配置用于静态服务器端呈现。
当 .NET 应用捆绑包和运行时下载到浏览器时，交互式自动呈现模式最初会使用交互式 SSR。 激活 .NET WebAssembly 运行时后，呈现模式会切换到交互式 WebAssembly 呈现。
默认情况下，Blazor Web 应用模板会使用单个项目启用静态和交互式 SSR。 如果还启用了 CSR，则该项目将包含用于基于 WebAssembly 的组件的其他客户端项目（
.Client）。 客户端项目的生成输出将下载到浏览器并在客户端上执行。 任何使用 WebAssembly 或自动呈现模式的组件都必须从客户端项目生成。有关详细信息，请参阅 ASP.NET Core Blazor 呈现模式。
“交互位置”下拉列表
- 每页/组件：默认设置每个页面或每个组件的交互性。
- 全局：选择此选项可为整个应用设置全局交互性。
仅当“交互式呈现模式”不是
None且未启用身份验证时，才能设置交互位置。要包含基于 Bootstrap 样式的示例页面和布局，请选中“包含示例页”复选框。 对于没有示例页和 Bootstrap 样式的项目禁用此选项。
有关详细信息，请参阅 ASP.NET Core Blazor 呈现模式。
- 对于托管的 Blazor WebAssembly 应用，请在“其他信息”对话框中选中“ASP.NET Core 托管”复选框。
选择“创建”。
按 Ctrl+F5 (Windows) 或 ⌘+F5 (macOS) 运行应用。
在 Visual Studio 中运行托管的 Blazor WebAssembly解决方案时，该解决方案的启动项目为 Server 项目。
有关信任 ASP.NET Core HTTPS 开发证书的详细信息，请参阅在 ASP.NET Core 中强制实施 HTTPS。
重要
执行托管应用 Blazor WebAssembly 时，请从解决方案的 Server 项目运行应用。
启动应用时，仅会使用 Server 项目中的 Properties/launchSettings.json 文件。
若要在 Linux 或 macOS 上创建 Blazor 应用，请使用以下指南：
使用 .NET 命令行接口 (CLI) 在命令行界面中执行命令。
安装最新版本的 .NET Core SDK。 如果以前安装了该 SDK，可以执行以下命令来确定已安装的版本：
dotnet --version
为你的平台安装最新版本的 Visual Studio Code。
安装适用于 Visual Studio Code 的 C# 开发工具包。 有关详细信息，请参阅调试 ASP.NET Core Blazor 应用。
创建新项目：
对于具有默认服务器端呈现的 Blazor Web 应用体验，请在使用
blazor项目模板的命令 Shell 中执行以下命令：dotnet new blazor -o BlazorApp要仅启用客户端呈现，请使用设置为
WebAssembly的-int|--interactivity选项：dotnet new blazor -o BlazorApp -int WebAssembly要启用交互式服务器端呈现，然后启用客户端呈现，请使用设置为
Auto的-int|--interactivity选项：dotnet new blazor -o BlazorApp -int Auto如果通过将
-int|--interactivity选项设置为None来禁用交互性，则生成的应用将不具有交互性。 应用仅配置用于静态服务器端呈现：dotnet new blazor -o BlazorApp -int None当 .NET 应用捆绑包和运行时下载到浏览器时，交互式自动呈现模式最初会使用交互式服务器端呈现（交互式 SSR）。 激活 .NET WebAssembly 运行时后，呈现模式会切换到交互式 WebAssembly 呈现模式。
默认情况下，Blazor Web 应用模板会使用单个项目同时启用静态和交互式服务器端呈现。 如果还启用了交互式 WebAssembly 呈现模式，则该项目将包含用于基于 WebAssembly 的组件的其他客户端项目（
.Client）。 客户端项目的生成输出将下载到浏览器并在客户端上执行。 必须通过客户端项目生成使用交互式 WebAssembly 或交互式自动呈现模式的任何组件。有关详细信息，请参阅 ASP.NET Core Blazor 呈现模式。
应用默认的交互位置基于每个组件/页面。 若要在整个应用中建立交互性，请使用
-ai|--all-interactive选项：dotnet new blazor -o BlazorApp -ai通过为顶级
HeadOutlet和Routes组件指定呈现模式，选择此选项可为App组件中的整个应用设置交互性。 在这些组件上设置交互性会将交互性传播到应用中的所有子组件。仅当交互式呈现模式 (
-int|--interactivity) 不是None且未启用身份验证时，才能设置交互位置。若要创建没有示例页面和样式的应用，请使用
-e|--empty选项：dotnet new blazor -o BlazorApp -e对于独立 Blazor WebAssembly 体验，在使用
blazorwasm模板的命令行界面中执行以下命令：dotnet new blazorwasm -o BlazorApp若要创建没有示例页面和样式的独立 Blazor WebAssembly 应用，请使用
-e|--empty选项：dotnet new blazorwasm -o BlazorApp -e
创建新项目：
有关演示代码和 Bootstrap 的 Blazor Server 体验，请执行以下命令：
dotnet new blazorserver -o BlazorApp或者，使用
blazorserver-empty项目模板创建没有演示代码和 Bootstrap 的 Blazor Server 应用：dotnet new blazorserver-empty -o BlazorApp有关演示代码和 Bootstrap 的独立 Blazor WebAssembly 体验，请执行以下命令：
dotnet new blazorwasm -o BlazorApp或者，使用
blazorwasm-empty项目模板创建没有演示代码和 Bootstrap 的独立 Blazor WebAssembly 应用：dotnet new blazorwasm-empty -o BlazorApp有关演示代码和 Bootstrap 的托管 Blazor WebAssembly 体验，请将托管选项 (
-ho/--hosted) 添加到命令：dotnet new blazorwasm -o BlazorApp -ho或者，使用包含托管选项的
blazorwasm-empty模板创建没有演示代码和 Bootstrap 的托管 Blazor WebAssembly 应用：dotnet new blazorwasm-empty -o BlazorApp -ho
创建新项目：
若要获得 Blazor WebAssembly 体验，请执行以下命令：
dotnet new blazorwasm -o BlazorApp对于托管的 Blazor WebAssembly 体验，请向命令添加托管选项 (
-ho或--hosted) 选项：dotnet new blazorwasm -o BlazorApp -ho若要获得 Blazor Server 体验，请执行以下命令：
dotnet new blazorserver -o BlazorApp
在 Visual Studio Code 中打开 BlazorApp 文件夹，
当 Visual Studio Code 请求你添加资产来生成和调试项目时，请选择“是”。
如果 Visual Studio Code 不自动提供用于添加生成和调试资产的功能（含 launch.json 和 tasks.json 文件的 .vscode 文件夹），请选择“视图”>“命令面板”，然后在搜索框中输入“.NET”。 从命令列表中选择“.NET: Generate Assets for Build and Debug”命令。
注意
有关 Visual Studio Code 配置和使用的详细信息，请参阅 Visual Studio Code 文档。
项目的 Properties/launchSettings.json 文件包含文件 profiles 部分中任何配置文件的调试代理的 inspectUri 属性：
"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
托管的 Blazor WebAssembly 启动和任务配置
对于托管的 Blazor WebAssembly解决方案，请将包含 launch.json 和 tasks.json 文件的 .vscode 文件夹添加（或移动）到解决方案的父文件夹中，父文件夹包含常见的项目文件夹：Client、Server 和 Shared。 更新或确认 launch.json 和 tasks.json 文件中的配置是否从 Server 项目执行托管应用 Blazor WebAssembly。
重要
执行托管应用 Blazor WebAssembly 时，请从解决方案的 Server 项目运行应用。
启动应用时，仅会使用 Server 项目中的 Properties/launchSettings.json 文件。
检查 Properties/launchSettings.json 文件，然后从 applicationUrl 属性确定应用的 URL。 根据框架版本，URL 协议要么是安全的 (HTTPS) https://localhost:{PORT}，要么是不安全的 (HTTP) http://localhost:{PORT}，其中 {PORT} 占位符是一个已分配的端口。 记下要在 launch.json 文件中使用的 URL。
在 .vscode/launch.json 文件的启动配置中：
- 将当前工作目录 (
cwd) 设置为 Server 项目文件夹。 - 使用
url属性指示应用的 URL。 使用前面从Properties/launchSettings.json文件中记录的值。
"cwd": "${workspaceFolder}/{SERVER APP FOLDER}",
"url": "{URL}"
在上面的配置中：
{SERVER APP FOLDER}占位符是 Server 项目的文件夹，通常为 Server。{URL}占位符是应用的 URL，它在应用的Properties/launchSettings.json文件的applicationUrl属性中指定。
如果 Google Chrome 优先于 Microsoft Edge，请为配置更新或添加 "browser": "chrome" 的其他属性。
以下示例 .vscode/launch.json 文件：
- 将当前工作目录设置为 Server 文件夹。
- 将应用的 URL 设置为
http://localhost:7268。 - 将默认浏览器从 Microsoft Edge 更改为 Google Chrome。
"cwd": "${workspaceFolder}/Server",
"url": "http://localhost:7268",
"browser": "chrome"
完整的 .vscode/launch.json 文件：
{
"version": "0.2.0",
"configurations": [
{
"type": "blazorwasm",
"name": "Launch and Debug Blazor WebAssembly Application",
"request": "launch",
"cwd": "${workspaceFolder}/Server",
"url": "http://localhost:7268",
"browser": "chrome"
}
]
}
在 .vscode/tasks.json 中，添加一个 build 参数，该参数指定 Server 应用的项目文件的路径：
"${workspaceFolder}/{SERVER APP FOLDER}/{PROJECT NAME}.csproj",
在上述参数中：
{SERVER APP FOLDER}占位符是 Server 项目的文件夹，通常为 Server。{PROJECT NAME}占位符为应用名称，在 Blazor WebAssembly 项目模板生成的应用中，该名称通常为解决方案名称后跟“.Server”。
解决方案 Server 文件夹中名为 BlazorHosted 的 Server 项目的示例 .vscode/tasks.json 文件：
{
"version": "2.0.0",
"tasks": [
{
"label": "build",
"command": "dotnet",
"type": "process",
"args": [
"build",
"${workspaceFolder}/Server/BlazorHosted.Server.csproj",
"/property:GenerateFullPaths=true",
"/consoleloggerparameters:NoSummary",
],
"group": "build",
"presentation": {
"reveal": "silent"
},
"problemMatcher": "$msCompile"
}
]
}
按 Ctrl+F5 (Windows) 或 ⌘+F5 (macOS) 运行应用。
.vscode/launch.json （launch 配置）：
...
"cwd": "${workspaceFolder}/{SERVER APP FOLDER}",
...
在当前工作目录 (cwd) 的前面配置中，{SERVER APP FOLDER} 占位符是 Server 项目的文件夹，通常为“Server”。
如果使用 Microsoft Edge 并且系统上未安装 Google Chrome，请在配置中添加额外属性 "browser": "edge"。
Server 项目文件夹的示例，该示例将生成 Microsoft Edge（而不是默认浏览器 Google Chrome）作为调试运行的浏览器：
...
"cwd": "${workspaceFolder}/Server",
"browser": "edge"
...
.vscode/tasks.json（dotnet 命令参数）：
...
"${workspaceFolder}/{SERVER APP FOLDER}/{PROJECT NAME}.csproj",
...
在上述参数中：
{SERVER APP FOLDER}占位符是 Server 项目的文件夹，通常为“Server”。{PROJECT NAME}占位符是应用的名称，在 Blazor 项目模板生成的应用中，该名称通常基于解决方案的名称后跟“.Server”。
来自将 SignalR 与 Blazor WebAssembly 应用配合使用的教程的以下示例使用项目文件夹名称 Server 和项目名称 BlazorWebAssemblySignalRApp.Server：
...
"args": [
"build",
"${workspaceFolder}/Server/BlazorWebAssemblySignalRApp.Server.csproj",
...
],
...
按 Ctrl+F5 (Windows) 或 ⌘+F5 (macOS) 运行应用。
信任开发证书
有关详细信息，请参阅在 ASP.NET Core 中强制使用 HTTPS。
Visual Studio 解决方案文件 (.sln)
解决方案是组织一个或多个相关代码项目的容器。 Visual Studio 使用解决方案文件 (.sln) 来存储解决方案的设置。 解决方案文件使用唯一格式，不能直接编辑。
Visual Studio 之外的工具可以与解决方案文件进行交互：
- .NET CLI 可以通过
dotnet sln命令创建解决方案文件并列出/修改解决方案文件中的项目。 其他 .NET CLI 命令将解决方案文件的路径用于各种发布、测试和打包命令。 - Visual Studio Code 可以通过其集成终端执行
dotnet sln命令和其他 .NET CLI 命令，但不直接使用解决方案文件中的设置。
在整个 Blazor 文档中，解决方案用于描述从启用了“ASP.NET Core 托管”选项的 Blazor WebAssembly 项目模板或从 Blazor Hybrid 项目模板创建的应用。 从这些项目模板生成的应用默认包含解决方案文件 (.sln)。 对于开发人员未使用 Visual Studio 的托管 Blazor WebAssembly 应用，如果解决方案文件未与 .NET CLI 命令一起使用，则可以忽略或删除它。
有关详细信息，请参阅 Visual Studio 文档中的以下资源：
使用适用于跨平台 Blazor 开发的 Visual Studio Code
Visual Studio Code 是一个开源的跨平台集成开发环境 (IDE)，可用于开发 Blazor 应用。 使用 .NET CLI 创建新的 Blazor 应用，来使用 Visual Studio Code 进行开发。 有关详细信息，请参阅本文的 Linux/macOS 版本。
有关 Visual Studio Code 配置和使用的详细信息，请参阅 Visual Studio Code 文档。
Blazor 模板选项
Blazor 框架提供用于创建新应用的模板。 模板用于创建新的 Blazor 项目和解决方案，而不考虑你选择用于 Blazor 开发的工具（Visual Studio、Visual Studio Code 还是 .NET 命令行接口 (CLI)）：
- Blazor Web 应用项目模板：
blazor - Blazor WebAssembly 独立应用项目模板：
blazorwasm
- Blazor Server 项目模板：
blazorserver、blazorserver-empty - Blazor WebAssembly 项目模板：
blazorwasm、blazorwasm-empty
- Blazor Server 项目模板：
blazorserver - Blazor WebAssembly项目模板：
blazorwasm
有关 Blazor 项目模板的详细信息，请参阅 ASP.NET Core Blazor 项目结构。
有关模板选项的详细信息，请参阅以下资源：
- .NET Core 文档中的“适用于 dotnet new 的 .NET 默认模板”一文：
- 将 help 选项（
-h或--help）传递给命令 shell 中的dotnet newCLI 命令：dotnet new blazor -hdotnet new blazorwasm -h
- .NET Core 文档中的“适用于 dotnet new 的 .NET 默认模板”一文：
blazorserver（包括blazorserver-empty选项）blazorwasm（包括blazorwasm-empty选项）
- 将 help 选项（
-h或--help）传递给命令 shell 中的dotnet newCLI 命令：dotnet new blazorserver -hdotnet new blazorserver-empty -hdotnet new blazorwasm -hdotnet new blazorwasm-empty -h
- .NET Core 文档中的“适用于 dotnet new 的 .NET 默认模板”一文：
- 将 help 选项（
-h或--help）传递给命令 shell 中的dotnet newCLI 命令：dotnet new blazorserver -hdotnet new blazorwasm -h
其他资源
反馈
即将发布：在整个 2024 年，我们将逐步淘汰作为内容反馈机制的“GitHub 问题”，并将其取代为新的反馈系统。 有关详细信息，请参阅：https://aka.ms/ContentUserFeedback。
提交和查看相关反馈