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/',

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

相关推荐
时光追逐者29 分钟前
在 Blazor 中使用 Chart.js 快速创建数据可视化图表
开发语言·javascript·信息可视化·c#·.net·blazor
无奈何杨31 分钟前
扣子coze的AI工作流搭建技术,开源项目FlowGram流程搭建引擎
前端
ElasticPDF-新国产PDF编辑器41 分钟前
Angular 项目 PDF 批注插件库在线版 API 示例教程
前端·pdf·angular.js
6武71 小时前
Vue 数据传递流程图指南
前端·javascript·vue.js
goto_w1 小时前
uniapp上使用webview与浏览器交互,支持三端(android、iOS、harmonyos next)
android·vue.js·ios·uni-app·harmonyos
jakeswang1 小时前
查询条件与查询数据的ajax拼装
前端·ajax
samuel9182 小时前
axios取消重复请求
前端·javascript·vue.js
三天不学习2 小时前
JiebaAnalyzer 分词模式详解【搜索引擎系列教程】
前端·搜索引擎·jiebaanalyzer
苹果酱05672 小时前
Golang标准库——runtime
java·vue.js·spring boot·mysql·课程设计