使用 Vue 创建 ASP.NET Core 应用 - Visual Studio (Windows) | Microsoft Learn

来源： 使用 Vue 创建 ASP.NET Core 应用 – Visual Studio (Windows) | Microsoft Learn

适用范围：Visual Studio Visual Studio for Mac Visual Studio Code

在本文中，你将了解如何生成 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 创建客户端项目

确保安装以下内容：

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

1. 在“开始”窗口中（选择“文件”>“开始窗口”并打开），选择“新建项目”。

   

2. 在顶部的搜索栏中搜索“Vue”，然后选择“Vue 和 ASP.NET Core (预览版)”，并将 JavaScript 或 TypeScript 作为所选语言。

   

3. 为项目和解决方案命名，然后选择“创建”。

   创建项目后，解决方案资源管理器应如下所示：

   

   与独立 Vue 模板相比，可以看到一些用于与 ASP.NET Core 集成的新增和修改文件：

   • aspnetcore-https.js
   • vite.config.json（已修改）
   • HelloWorld.vue（已修改）
   • package.json（已修改）

1. 在解决方案资源管理器中，右键单击 ASP.NET Core 项目 (webapi)，然后选择“属性”。

   

2. 在“属性”页中，打开“调试”选项卡，然后选择“打开调试启动配置文件 UI”选项。 清除“启动浏览器”选项。

   

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

    备注

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

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

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

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

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

1. 在解决方案资源管理器中，右键单击 ASP.NET Core 项目，然后选择“添加”>“项目引用”。
2. 选择 Vue 项目并选择“确定”。
3. 在解决方案资源管理器中，右键单击 ASP.NET Core 项目，然后选择“卸载项目”。

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

4. 在 .csproj 文件中，更新项目引用，然后添加 <ReferenceOutputAssembly> 并将值设置为 false。

   更新引用后，它如下所示（替换你自己的项目文件夹和项目名称）。

   XML复制

   <ProjectReference Include="..\vueprojectfolder\vueprojectname.esproj">
       <ReferenceOutputAssembly>false</ReferenceOutputAssembly>
   </ProjectReference>
   

5. 右键单击 ASP.NET Core 项目并选择“重新加载项目”。
6. 在 Program.cs 中，更新 Environment.IsDevelopment 的检查，使其类似以下内容。
   C#复制

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

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

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

   可以使用 VUE 项目属性中的生产环境生成命令修改 npm run build 命令。 若要进行修改，请在解决方案资源管理器中右键单击 Vue 项目并选择“属性”。

你可能会看到以下错误：

[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 证书，然后重试。

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

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

   如果有多个 applicationUrl 属性，请使用 https 终结点查找一个。 它看起来应该类似于 https://localhost:7142。

2. 然后，转到 Vue 项目的 vite.config.js 文件。 更新 target 属性，以匹配 launchSettings.json 中的 applicationUrl 属性。 在进行更新时，该值应如下所示：
   JavaScript复制

   target: 'https://localhost:7142/',
   

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

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

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

"httpPort": 5175, 
"sslPort": 5173  

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

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

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