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

news2025/2/22 18:42:09

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

前言
一、先决条件
二、创建项目
三、运行项目
四、增加API
五、发布到IIS
六、设置Vue的发布

前言

最近从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.

右键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中,首先右击项目,然后点击发布,选择文件夹,接下来默认就可以了.
在这里插入图片描述
这里也可以改成自己想保存的目录

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

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