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

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是不会被检测到的,需要增加注解
javascript 复制代码
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/',

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

相关推荐
伍哥的传说9 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi98783811 分钟前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊22 分钟前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听11 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿1 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉1 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课2 小时前
React useEffect 详解与运用
前端·react.js
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee1232 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为