目前，Visual Studio 包含支持 Angular、React 和 Vue 的 ASP.NET Core 单页应用程序 (SPA) 模板。这些模板在 ASP.NET Core 项目中提供内置的客户端应用文件夹，其中包含每个框架的基本文件和文件夹。
从 Visual Studio 2022 预览版 2 开始，可以使用本文中所述的方法创建具有以下功能的 ASP.NET Core 单页应用程序：
1.将客户端应用放在 ASP.NET Core 项目之外的独立项目中
2.基于计算机上安装的框架 CLI 创建客户端项目.备注:目前，必须手动发布前端项目（当前不支持发布工具）。有关附加信息，请参见 https://github.com/MicrosoftDocs/visualstudio-docs/issues/7135。
先决条件
确保你的电脑安装了以下开发工具：
1.安装了 Visual Studio 2022 预览版 2 或更高版本，以及 ASP.NET 和 Web 开发工作负载。若没安装的请转到 Visual Studio 下载页，进行免费安装。如果需要安装工作负载，但已安装 Visual Studio，请转到“工具”>“获取工具和功能...”，这会打开 Visual Studio 安装程序。选择“ASP.NET 和 web 开发”工作负载，然后选择“修改” 。
2.npm (https://www.npmjs.com/)，随 Node.js 提供
3.Vue CLI (https://cli.vuejs.org/)
创建前端应用
1.在“开始”窗口中（选择“文件”>“开始窗口”并打开），选择“新建项目”。
2.在顶部的搜索栏中搜索 Vue，然后选择“独立 JavaScript Vue 模板”或“独立 TypeScript Vue 模板” 。
3.为你的项目和解决方案命名。转到“其他信息”窗口时，请务必选中“为空的 ASP.NET Web API 项目添加集成”选项。此选项将文件添加到 Vue 模板，以便稍后可以与 ASP.NET Core 项目挂钩。
创建项目后，你会看到一些新的和经修改的文件：
codeduidaima.com
-
aspnetcore-https.js
-
vue.config.json（已修改）
-
HelloWorld.vue（已修改）
-
package.json（已修改）
创建后端应用
1.在解决方案资源管理器中，右键单击解决方案名称，将鼠标悬停在“添加”上，然后选择“新建项目”。
2.搜索并选择 ASP.NET Core Web API 项目。
3.为你的项目和解决方案命名。转到“其他信息”窗口时，选择“.NET 6.0”作为目标框架。
创建项目后，解决方案资源管理器应如下所示：
4.从 Properties 文件夹打开 launchSettings.json，然后在后端应用的 profiles 节下将默认端口更改为 5001 和 5003。
codeduidaima.com
-
"profiles": {
-
"yourbackendapp": {
-
"commandName": "Project",
-
"launchUrl": "swagger",
-
"environmentVariables": {
-
"ASPNETCORE_ENVIRONMENT": "Development"
-
},
-
"applicationUrl": "https://localhost:5001;http://localhost:5003",
-
"dotnetRunMessages": true
-
},
设置项目属性
1.在解决方案资源管理器中，右键单击 ASP.NET Core 项目，然后选择“属性”。
2，转到“调试”菜单，然后选择“打开调试启动配置文件 UI”选项。清除“启动浏览器”选项。
备注：目前，launch.json 必须位于 .vscode 文件夹下。
设置启动项目
1.在解决方案资源管理器中右键单击解决方案名称，并选择“设置启动项目”。将启动项目从“单个启动项目”更改为“多个启动项目”。为每个项目的操作选择“启动”。
2.接下来，选择后端项目，将其移到前端之上，使它首先启动。
启动项目
1.启动项目之前，请确保端口号匹配。转到 ASP.NET Core 项目中的 launchSettings.json 文件（在 Properties 文件夹中） 。从 applicationUrl 属性获取端口号。
如果有多个 applicationUrl 属性，请使用 https 终结点查找一个。它看起来应该类似于 https://localhost:5001。
2.然后，转到 Vue 项目的 vue.config.js 文件。更新目标属性，以匹配 launchSettings.json 中的 applicationUrl 属性。在进行更新时，该值应如下所示：
codeduidaima.com
-
target: 'https://localhost:5001',
3.若要启动项目，请按 F5 或选择窗口顶部的“开始”按钮 。将显示两个命令提示符：
3.1正在运行的 ASP.NET Core API 项目
3.2运行 vue-cli-service serve 命令的 Vue CLI
备注：检查消息的控制台输出，例如指示你更新 Node.js 版本的消息。应会显示一个 Vue 应用，该应用通过 API 填充。
故障排除
1.代理错误
你可能会看到以下错误：
codeduidaima.com
-
[HPM] Error occurred while trying to proxy request /weatherforecast from localhost:4200 to https://localhost:5001 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)
如果看到此问题，很可能前端在后端之前启动。看到后端命令提示符启动并运行后，只需在浏览器中刷新 Vue 应用即可。否则，如果端口正在使用，请在 launchSettings.json 和 vue.config.js 中尝试 5002。
2.过时的 Vue 版本
如果在创建项目时看到控制台消息“找不到文件“C：\Users\Me\source\repos\vueprojectname\package.json”，则可能需要更新 Vue CLI 的版本。更新 Vue CLI 后，可能还需要删除 C:\Users\[yourprofilename] 中的 .vuerc 文件。
3.Docker
如果在创建 Web API 项目时启用 Docker 支持，则后端可能会开始使用 Docker 配置文件，而不侦听已配置的端口 5001。若要解决问题，请执行以下操作：
通过添加以下属性编辑 launchSettings.json 中的 Docker 配置文件：
codeduidaima.com
-
"httpPort": 5003,
-
"sslPort": 5001
或者，使用以下方法进行重置：
1.在解决方案属性中，将后端应用设置为启动项目。
2.在“调试”菜单中，使用“开始”按钮下拉菜单将配置文件切换到后端应用的配置文件。
3.接下来，在解决方案属性中，重置为多个启动项目。
来源：https://www.duidaima.com/Group/Topic/ASP.NET/5561
