VS2022中.Net Api + Vue 从创建到发布到IIS

前言

最近从VS2019 升级到了VS2022,终于可以使用官方的.Net + Vue 组合了,但是使用过程中还是有很多问题,这里记录一下.

一、先决条件

Visual Studio的安装内容，首选确保Visual Studio是2022版本及以上,安装部门选择ASP.NET和Web开发选项与 Node.js开发.

二、创建项目

准备好上面的内容后在创建的项目的地方搜索Vue and ASP.NET Core:

我这里命名为VueAndNetTest,后面配置直接默认即可

三、运行项目

创建好项目后可以看到解决方案里面有两个项目,一个是.Net的为服务端,Vue的为客户端,毕竟是个前后端分离的项目.

到这里就已经可以直接运行项目了，会有两个命令符窗口弹出来,一个是Vue的运行另一个是.Net Core的运行.


准备好后则会打开两个网页,注意都不要关闭否则要重新运行项目了.

还有一个Swagger的API管理界面,可以在这里测试API.

四、增加API

到这里已经可以正常开发了,这里再举个列子说明如何增加自定义的Controller与API.

1. 右键Controllers文件夹,然后添加Controller,我这里添加一个HomeController.cs
   
   新增的Controller是不会被检测到的,需要增加注解

using Microsoft.AspNetCore.Mvc;namespace VueAndNetTest.Server.Controllers
{[ApiController][Route("[controller]")]public class HomeController : Controller{public IActionResult Index(){return View();}}
}

五、发布到IIS

在上述设置之后就可以发布项目了,右击.Net项目,我这里是发布到文件夹然后手动发布到IIS中,首先右击项目,然后点击发布,选择文件夹,接下来默认就可以了.

这里也可以改成自己想保存的目录

点击保存,等发布后会出现这个界面,然后再点击发布按钮,下次发布直接点击发布就可以了

这是发布完后的文件夹内容

接下来是IIS的设置
先确认一点是使用单独的端口号还是使用默认的，如果使用默认的则需要一个名称用于访问，在这里我发布到默认端口.

1. 首先在IIS添加一个应用程序VueAndNetTest
   
2. 别名就是应用程序名称VueAndNetTest,物理路径选择刚刚发布的路径
   
3. 点击确定后则发布成功可以成功访问网站了

接下来你会发现你的网站还是白色的,那么就对了

因为这里是使用默认的设置的网站名称为VueAndNetTest,所以需要设置一下

六、设置Vue的发布

首先找到文件vite.config.js,在defineConfig中添加内容

base: '/VueAndNetTest/',

这样设置后就可以正常访问了