vue+asp.net Web api前后端分离项目发布部署

最新推荐文章于 2025-11-01 11:19:53 发布
原创 最新推荐文章于 2025-11-01 11:19:53 发布 · 5.5k 阅读 · 26 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript #asp.net

本文详细介绍了使用Vue脚手架和ASP.NETCore构建的前后端项目在IIS服务器上的部署步骤，包括前端打包、后端发布、IIS环境准备、网站创建及接口地址配置，最终实现前后端的正常通信。

一、前后端项目介绍

1.前端项目是使用vue脚手架进行创建的。

脚手架版本：@vue/cli 5.0.8

编译器版本：vs code 1.82.2

2.后端是一个asp.net  Core Web API 项目

后端框架版本：.NET 6.0

编译器版本：vs 2022

二、发布部署步骤

第一步：在vs code 编译器中的终端窗口输入如下命令，进行前端项目打包。

npm run build

打包后文件如下所示：

第二步：在 vs2022中进行后端项目发布。

选择项目后，右键鼠标，选择发布，然后选择发布到文件夹。

发布后文件如下所示：

最低0.47元/天 解锁文章
ASP.NET Core + Vue.js前后端分离黄金法则：从零到部署的深度实战
墨夶的博客
07-01 1505
本文介绍了前后端分离架构在企业级应用中的实战实现，涵盖环境配置、项目搭建、核心功能开发和部署优化。通过12个代码示例详细讲解：1）使用.NET Core Web API和Vue.js创建分离项目，配置CORS解决跨域问题；2）实现用户管理模块的后端控制器和前端组件；3）集成JWT身份验证；4）优化生产环境并完成Docker容器化部署。文章提供了从开发到上线的完整流程，包括Swagger调试、axios封装、RESTful API设计等关键技巧，帮助开发者快速构建现代化Web应用。
Vue.js结合ASP.NET Core构建用户登录与权限验证系统
包子的博客
06-12 2029
在本教程中，我将利用Visual Studio 2022的强大集成开发环境，结合Vue.js前端框架和ASP.NET Core后端框架，从头开始创建一个具备用户登录与权限验证功能的Web应用程序。我们将充分利用Visual Studio的内置工具和模板来简化开发流程。
基于Asp.Net Core + Vue.js 项目实战
热门推荐
青石的博客
03-11 1万+
简介 一个用于练手的前后端分离的小Demo，基于Asp.Net Core + Vue.js 实现的一个小日记功能！ 项目效果 登录注册页面 页面首页 个人日记管理页面 其中日记都做了分页功能，默认设置为5页！ 单篇日记查看 添加编辑页面 采用了 wangEditor 富文本编辑器，不过暂时没有加入上传图片和视频的功能！ 简单的用户功能 结尾 整体项目用户认证的实现是通过JWT的...
【ASP.NET Core跨域CORS配置全攻略】：彻底解决前后端分离开发中的跨域难题
最新发布
FuncLens的博客
11-01 765
彻底解决前后端分离开发中的跨域难题，本文详解ASP.NET Core 跨域 CORS 配置方法，涵盖常见场景、策略设置与中间件使用技巧，支持多种请求类型，提升项目兼容性与安全性，值得收藏。
vue项目demo（asp.net mvc5+vue2.5）
02-13
本项目是asp.net mvc5+vue2.5的项目，花了很长时间做的。 实现的功能如下： 1.不仅有vue的基本功能，而且设计到vue的组件功能。 2.实现了增删改查的功能，而且是一对多的。 3.后台使用了EF进行操作数据库，EF使用的是codeFirst 4.实现了分页的功能。 5.另外，本项目无论是前台还是后台都对代码进行了注释，使得项目非常容易理解，花了很长时间做的，麻烦给打5分好评，非常感谢。
ASP.NET MVC+Vue.js实现联系人管理
diaobiao8107的博客
06-12 1317
接触了一天vue.js，简单浏览了一本关于vue的电子书，就开始动手使用ASP.NET MVC和Vue.js开发一个联系人管理的小程序。 先看一下这个联系人管理的小程序的界面，也就是我们大概要实现什么样的功能。 上面截图可以看出，这是一个很简单的表格管理功能。我们先分析一下，上述有哪些功能需要实现： 1、默认先加载出所有的联系人信息，有信息的行后面的操作那一栏，显示“修改”、“...
ASP.NET前后端分离，WebApi。Vue3+ElementPlus+Axios+Pinia全流程教程
m0_46319477的博客
04-28 6362
ASP.NET前后端分离，WebApi。Vue3+ElementPlus+Axios+Pinia全流程教程
ASP.NET全栈开发验证模块之在Vue中使用前端校验
ddhrzyt4028的博客
07-18 250
前面分享了两篇关于.NET的服务端校验的文章，在系统里光有服务端校验虽然能够勉强使用，但会出现许多不愉快的体验，如上一章我在最后提交的时候填写了3个表单，在仅有最后一个表单出现了错误的时候，虽然达到了校验功能，表明了错误，但我前面三个表单的数据都被干掉了啊。再则比如注册的时候我填了那么多东西，我提交后你却告诉我已经被注册了，如果不是真爱，大概会毫不留情的Alt+F4 再也不见啦。 为了...
精选资源
基于C# .Net+Vue实现前后端分离的仓库管理系统（PC端+server端源码）
06-20
服务宗旨：有任何问题私信我 适合人群：工作中项目需要、模板框架实战学习、大学毕业设计参考、找工作项目实战积累等等 - Swagger生成接口文档 - 跨域 - webconfig ... - webapi过滤器,去校验
前后端分离项目部署，vue--nagix发布部署，.net--API发布部署。
TangMonk的博客
07-23 692
连接池配置：pooling=true;
基于Asp.Net WebApi和Vue的通用权限管理系统设计源码
02-21
该系统采用前后端分离的架构模式，主要由后端框架Asp.Net WebApi和前端框架Vue组合而成，使用Dapper作为数据库操作的中间件，以及IView作为Vue的前端界面设计框架。 系统后端采用的Asp.Net WebApi是微软推出的一款...
Asp.net+Vue2构建简单记账WebApp
09-13
作为一个asp.net 程序员，当发现Vue.js的存在时就爱上它，但是在asp.net应用中使用Vue一时让我无从上手。直到最近有了点心得。就计划把之前做的一个记账应用前端改为Vue2实现。 具体请看我博客里介绍 http://blog.csdn.net/yiershan1314/article/details/77875679
Vue.js与 ASP.NET Core 服务端渲染功能整合
11-29
http://mgyongyosi.com/2016/Vuejs-server-side-rendering-with-aspnet-core/ 原作者：Mihály Gyöngyösi 译者：oopsguy.com 我真的很喜欢在前端使用 Vue.js，Vue 服务端渲染直到第二个版本才被支持。 在本例中，我想展示如何将 Vue.js  服务端渲染功能整合 ASP.NET Core。 我们在服务端使用了 Microsoft.AspNetCore.SpaServices 包，该包提供 ASP.NET Core API，以便于我们可以使用上下文信息调用 Node.js 托管的 JavaScrip
ASPNETCore21教程前后端分离的后端接口vue教程的姊妹篇
08-15
ASP.NET Core 2.1 教程,，前后端分离的后端接口，vue教程的姊妹篇
Asp.Net Core 3.1 WebApi 实现前后端分离，实现文件上传下载【02源码】
09-24
架构设计：ASP.Net Core 3.1 WebApi+Swagger+Jwt+Autofac。 分享初衷：最近在做前后端分离项目，用到了文件上传下载功能，找了很多类似的案例，基本上都是相互转载，很少有原创的(总之找了很久没找到合适的)，最后没有达到我想要的预期效果，故写此篇博客。 需求背景：以前在做文件上传下载，都是基于FrameWork项目或者Core Web项目实现的文件上传或下载，基于web的文件下载及权限比较好实现的。但是现在很多公司技术领导层，都在推行前后端分离理念，所以这一次我承担了Core Api 架构设计，采用的是Vue+Core 3.1 WebApi去实现前后端分离. 实现效果图：https://blog.csdn.net/qq_15632461/article/details/108626802
ASP.net core前后端分离开发
weixin_51550030的博客
11-21 1874
找到并进入这个文件夹后，我们可以输入 vue create 项目名称，新建一个项目。在这里我们的vue框架就创建好了，然后找一个可以写前端网页的软件把它导进来就可以了。4、安装完所需配置后我们就可以创建项目了，首先我们要先创建一个文件夹。新建一个控制器，里面写一个行动方法，我们这里做的是登录功能。首先我们需要安装vue框架来编写前端代码，以下是安装过程。在这里我创建的项目名为pracvue。上面的vue11-21是我创建的。接下来我们可以处理后端代码了。，同时它会自动有一些子文件。
ASP.Net Core 和 Vue.js 全栈开发
跨学科知识视角展现
09-07 1815
特点 采用实践方法来实现使用 ASP.NET Core 5 和 Vue.js 3 构建健壮应用程序的实用方法 从设置 Web 应用程序的后端开始，以干净的架构、命令查询责任分离 (CQRS)、中介模式和 Entity Framework Core 5 为指导 展示如何使用最佳实践构建前端应用程序，状态 Vuex 管理、Vuetify UI 组件库、用于输入验证的 Vuelidate、Vue Router 延迟加载和 JWT 身份验证 专注于测试和部署 最后，使用最常见的 Vue.js npm 包和 ASP
前后端分离项目如何部署_再谈前后端分离开发和部署
weixin_39525355的博客
11-20 1502
前后端分离开发已成为业界的共识，但分离的同时也带来了部署的问题。传统web模式下，前端和后端同属一个项目，模板的渲染理所当然由后端渲染。然而随着node的流行，以及webpack的模块化打包方案，让前端在开发阶段完全有能力脱离后端环境：通过本地node启动一个服务器，搭配Mock数据，马上就可以进行业务开发了。但是到了部署阶段，问题也就显现出来：前端最后打包出来的js，css以及index.htm...
关于.net项目前后端分离框架（一）
weixin_34176694的博客
12-27 1805
.net前后端分离项目，主要就是调用WebApi接口实现连接。 主要程序需要AJAX实现， $.ajax({ type: 'post', url: '/api/Controller/action', data: { UserGuid: userguid}...
基于VUE与ASP.NET MVC的前后端分离架构Demo
本项目标题为“VUE+AXOIS+ASP.NET MVC+EF+SQLServer架构的Demo”，从名称即可看出其技术栈涵盖了当前主流的前后端分离开发模式，融合了现代前端框架、后端MVC架构、ORM数据访问层、关系型数据库以及实际部署能力。...
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值