教程：在 Visual Studio 中使用 Vue 创建 ASP.NET Core 应用

项目
01/13/2024

在本文中，你将了解如何生成 ASP.NET Core 项目来充当 API 后端，并生成 Vue 项目来充当 UI。

Visual Studio 包含支持 Angular、React 和 Vue 的 ASP.NET Core 单页应用程序 (SPA) 模板。这些模板在 ASP.NET Core 项目中提供内置的客户端应用文件夹，其中包含每个框架的基本文件和文件夹。

可以使用本文中所述的方法创建具有以下功能的 ASP.NET Core 单页应用程序：

将客户端应用放在 ASP.NET Core 项目之外的独立项目中
基于计算机上安装的框架 CLI 创建客户端项目

注意

本文介绍使用 Visual Studio 2022 版本 17.8 中的已更新模板创建项目的过程，该版本使用 Vite CLI。

先决条件

确保安装以下内容：

安装了“ASP.NET 和 Web 部署”工作负载的 Visual Studio 2022 版本 17.8 或更高版本。请转到 Visual Studio 下载页，进行免费安装。如果需要安装工作负载，但已安装 Visual Studio，请转到“工具”>“获取工具和功能...”，这会打开 Visual Studio 安装程序。选择“ASP.NET 和 web 开发”工作负载，然后选择“修改” 。
npm (https://www.npmjs.com/)，随 Node.js 提供。

创建前端应用

在“开始”窗口中（选择“文件”>“开始窗口”并打开），选择“新建项目”。
在顶部的搜索栏中搜索“Vue”，然后选择“Vue 和 ASP.NET Core (预览版)”，并将 JavaScript 或 TypeScript 作为所选语言。
将项目命名为 VueWithASP，然后选择“创建”。

解决方案资源管理器显示以下项目信息：

与独立 Vue 模板相比，可以看到一些用于与 ASP.NET Core 集成的新增和修改文件：
- vite.config.json（已修改）
- HelloWorld.vue（已修改）
- package.json（已修改）

设置项目属性

在“解决方案资源管理器”中，右键单击 VueWithASP.Server，然后选择“属性”。
在“属性”页中，打开“调试”选项卡，然后选择“打开调试启动配置文件 UI”选项。对以 ASP.NET Core 项目（或存在的 https）命名的配置文件取消勾选“启动浏览器”选项。

这会阻止打开包含源天气数据的网页。

注意

在 Visual Studio 中，launch.json 存储与“调试”工具栏中的“开始”按钮关联的启动设置。目前，launch.json 必须位于 .vscode 文件夹下。

启动项目

按 F5 或选择窗口顶部的“开始”按钮启动项目。将显示两个命令提示符：

正在运行的 ASP.NET Core API 项目
Vite CLI 显示一条消息，例如“VITE v4.4.9 ready in 780 ms”

注意

检查控制台输出中是否有消息。例如，可能有一条更新 Node.js 的消息。

Vue 应用随即显示，并通过 API 填充。如果未显示该应用，请参阅疑难解答。

发布项目

从 Visual Studio 2022 版本 17.3 开始，可以使用 Visual Studio 发布工具发布集成解决方案。

注意

要使用发布，请使用 Visual Studio 2022 版本 17.3 或更高版本创建 JavaScript 项目。

在解决方案资源管理器中，右键点击 VueWithASP.Server 项目，然后选择“添加”>“项目引用”。

确保已选择 vuewithasp.client 项目。
选择 “确定” 。
再次右键点击 ASP.NET Core 项目，然后选择“编辑项目文件”。

这将打开项目的 .csproj 文件。

在 .csproj 文件中，确保项目引用包含 <ReferenceOutputAssembly> 元素并将值设置为 false。

此引用应如下所示。

 <ProjectReference Include="..\vuewithasp.client\vuewithasp.client.esproj">
   <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
 </ProjectReference>

右键单击 ASP.NET Core 项目并选择“重新加载项目”（如果该选项可用）。

在 Program.cs 中，请确保存在以下代码。

app.UseDefaultFiles();
app.UseStaticFiles();

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
   app.UseSwagger();
   app.UseSwaggerUI();
}

若要发布，请右键单击 ASP.NET Core 项目，选择“发布”，然后选择与所需的发布场景相匹配的选项，例如 Azure、发布到文件夹等。

与在 ASP.NET Core 项目中发布相比，该发布过程需要更多时间，因为发布时会调用 npm run build 命令。 BuildCommand 默认情况下运行 npm run build。

疑难解答

代理错误

你可能会看到以下错误：

[HPM] Error occurred while trying to proxy request /weatherforecast from localhost:4200 to https://localhost:5173 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

如果看到此问题，很可能前端在后端之前启动。看到后端命令提示符启动并运行后，只需在浏览器中刷新 Vue 应用即可。

否则，如果端口正在使用中，请尝试在 launchSettings.json 和 vite.config.js 中将端口号增加 1。

隐私错误

可能会看到以下证书错误：

Your connection isn't private

尝试从 %appdata%\local\asp.net\https 或 %appdata%\roaming\asp.net\https 中删除 Vue 证书，然后重试。

验证端口

如果天气数据未正确加载，可能还需要验证端口是否正确。

确保端口号匹配。转到 ASP.NET Core 项目中的 launchSettings.json 文件（在 Properties 文件夹中）。从 applicationUrl 属性获取端口号。

如果有多个 applicationUrl 属性，请使用 https 终结点查找一个。它看起来应该类似于 https://localhost:7142。
然后，转到 Vue 项目的 vite.config.js 文件。更新 target 属性，以匹配 launchSettings.json 中的 applicationUrl 属性。在进行更新时，该值应如下所示：
```
target: 'https://localhost:7142/',
```

过时的 Vue 版本

如果在创建项目时看到控制台消息“找不到文件 'C:\Users\Me\source\repos\vueprojectname\package.json'”，则可能需要更新 Vite CLI 的版本。更新 Vite CLI 后，可能还需要删除 C:\Users\[yourprofilename] 中的 .vuerc 文件。

Docker

如果在创建 Web API 项目时启用 Docker 支持，则后端可能会开始使用 Docker 配置文件，而不侦听已配置的端口 5173。若要解决问题，请执行以下操作：

通过添加以下属性编辑 launchSettings.json 中的 Docker 配置文件：

"httpPort": 5175, 
"sslPort": 5173

或者，使用以下方法进行重置：

在解决方案属性中，将后端应用设置为启动项目。
在“调试”菜单中，使用“开始”按钮下拉菜单将配置文件切换到后端应用的配置文件。
接下来，在解决方案属性中，重置为多个启动项目。

后续步骤

有关 ASP.NET Core 中的 SPA 应用程序的详细信息，请参阅开发单页应用。链接的文章为项目文件（如 aspnetcore-https.js）提供了更多上下文，尽管由于项目模板和 Vue.js 框架与其他框架之间的差异，实现的详细信息有所不同。例如，Vue 文件包含在一个单独的项目中，而不是在 ClientApp 文件夹中。

有关特定于客户端项目的 MSBuild 信息，请参阅 JSPS 的 MSBuild 属性。