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

一、前后端项目介绍

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中进行后端项目发布。

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

发布后文件如下所示:

第三步:IIS服务器部署前环境准备

在IIS服务器上部署前后端项目,需要安装一个.NET 6.0部署捆绑包。

官网下载地址:下载 .NET 6.0 (Linux、macOS 和 Windows) (microsoft.com)icon-default.png?t=N7T8https://dotnet.microsoft.com/zh-cn/download/dotnet/6.0

 window平台部署,需要下载托管捆绑包。

第四步:在IIS服务器上创建前后端网站

首先把前后端文件复制到一个单独的文件夹下,如下所示

然后在IIS服务器选中网站右键单击,选择添加网站,在弹框中输入网站名称,选择物理路径(此处路径就是上一步中前端文件所在的目录),然后设置端口号,此处可以任意设置(只要不和其他应用端口冲突即可),之后点击确定即可完成前端页面的部署。

下一步按照同样的方式进行后端网站部署。操作如下图所示。

下一步将对后端网站进行应用程序池配置。打开应用程序池,双击右侧后端网站,在弹框中选择【无托管代码】然后点击确定即可。

注意:安装完第三步中的托管包后,IIS网站模块中就会出现AspNetCoreModuleV2模块,有这个模板,才能进行后端网站部署。

第五步:修改前端文件中请求后端数据的接口地址,此处配置的地址如下:

const http = ref("http://192.168.173.128:8688/api")

注意:大家如果本地部署,这里的地址需要填写部署前端网站服务器的IP地址,端口填写为部署的后端网站的端口号。

重新打包一下前端文件,替换掉已经发布到服务器上的前端文件即可。

三、结果展示

在浏览器中访问前端网站地址:

http://192.168.173.128:8699/

如上所示,后端网站响应了前端网站发送的请求。

以上就是前后端分离项目IIS服务器部署的全部操作步骤,如果大家觉得有用请给点个赞,谢谢!

  • 3
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 3.0 和 ASP.NET Core WebAPI 都支持动态路由,实现起来也比较简单。 首先,在 ASP.NET Core WebAPI 中,我们需要在 Startup.cs 中配置路由。可以使用以下代码: ``` app.UseEndpoints(endpoints => { endpoints.MapControllerRoute( name: "default", pattern: "{controller}/{action}/{id?}"); }); ``` 这个配置会将请求转发到对应的控制器和方法中。其中,{controller} 和 {action} 表示控制器和方法名,{id?} 表示可选参数。 接着,在 Vue 3.0 中,我们可以使用 vue-router 实现动态路由。可以使用以下代码: ``` const router = createRouter({ history: createWebHistory(), routes: [ { path: '/:controller/:action/:id?', name: 'dynamic', component: DynamicComponent } ] }) ``` 这个配置会将请求转发到 DynamicComponent 组件中。其中,:controller、:action 和 :id? 表示控制器、方法名和可选参数。 最后,我们可以在 DynamicComponent 组件中调用 ASP.NET Core WebAPI 中的动态路由。可以使用以下代码: ``` axios.get(`/api/${this.$route.params.controller}/${this.$route.params.action}/${this.$route.params.id}`) .then(response => { // 处理响应 }) .catch(error => { // 处理错误 }) ``` 这个代码会发送请求到对应的控制器和方法中,其中,this.$route.params.controller、this.$route.params.action 和 this.$route.params.id 分别对应控制器、方法名和参数。 以上就是 Vue 3.0 和 ASP.NET Core WebAPI 实现动态路由的基本步骤。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值