教你发布vue+.netCore项目到服务器

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

#项目 #程序员

本文详细记录了Vue+.netCore项目从发布到部署到服务器的全过程，包括.netCore项目发布、Vue前端发布、服务器环境部署及解决常见错误的方法，旨在帮助开发者顺利进行项目部署。

最近一直在做项目，发布部署的事情都是同事或者老大做的，无奈什么事都要自己尝试经历后才能记住，所以发布的事情轮到我了，由于是第一次发布部署项目到一个新的服务器环境，难免会遇到各种各样的问题，总结下来，希望可以帮到需要的人。

项目框架使用的是vue+.netCore2.2所以发布的时候需要前后端分开发布，遇到的问题是挺多的，不过对自己来说也算是一种经历吧。

一．.netCore 项目发布

1.1 修改环境配置为线上服务器的数据库地址

将网站下的三个json文件的数据库配置修改为线上的数据库环境

1.2设置启动项，迁移数据库

将项目内的Migrator设置为启动项目，并修改项目下app.settings.json的连接字符串为服务器的IP，登录名和密码为线上数据库的登录名和密码

image

1.3迁移数据库到线上

F5启动项目，会弹出提示 是否将数据库迁移到线上服务器地址，输入 “y”即可将数据库迁移到服务器

image

1.4发布本地项目

重新将启动项目设置为Middleware.Web.Host,并点击发布按钮。将项目发布到自己选定的文件夹

最低0.47元/天 解锁文章
项目发布部署：如何发布.NETCore项目到IIS服务器？
西瓜程序猿
08-15 7573
本文将详细介绍如何发布.NET Core项目到IIS服务器。首先，第一步需要安装IIS，介绍了在本地电脑和服务器中进行安装。然后需要安装SDK和运行时才能发布.NETCore项目。其次介绍了如何发布.NETCore项目和Vue项目，并配置IIS。最后介绍了如何将项目部署到Service服务中。
Vue.NetCore-master.zip
10-08
Vue.NetCore前后端分离项目，前端是使用Vue编写，后端是WebApi
ASP.NET Core 和 VueJS（一）
最新发布
龙哥盟
10-11 484
Vue.js 3 比之前的版本更快、更小，而且 TypeScript 的全面开箱即用支持使它成为 Vue.js 的一个更易于维护、更易于使用的版本。然后,ASP.NET Core 5，这是当今最快的。NET web 框架。一起，Vue.js 为前端和 ASP.NET Core 5 为后台做了一个强大的组合。这本书遵循了实践的方法来实现使用 ASP 构建健壮的应用的实际方法.NET Core 5 和 Vue.js 3。这里的主题并不深入，本书面向的是忙碌的。
盘点6个.NetCore+Vue前后端分离的开源项目
成长的足迹
10-05 6378
这是一个基于.Net 6.0开发的应用框架，采用前后端分离架构，集成了上百个模块，如：统一支付、公众号管理、数据权限、任务调度、数据库读写分离等等。1、跨平台：这是基于.Net Core开发的系统，可以部署在Docker, Windows, Linux, Mac。1、跨平台：这是基于.Net Core开发的系统，可以部署在Docker, Windows, Linux, Mac。1、跨平台：这是基于.Net Core开发的系统，可以部署在Docker, Windows, Linux, Mac。
my.ini修改后服务无法启动_教你发布vue+.netCore项目到服务器
weixin_39785286的博客
11-25 310
最近一直在做项目，发布部署的事情都是同事或者老大做的，无奈什么事都要自己尝试经历后才能记住，所以发布的事情轮到我了，由于是第一次发布部署项目到一个新的服务器环境，难免会遇到各种各样的问题，总结下来，希望可以帮到需要的人。项目框架使用的是vue+.netCore2.2所以发布的时候需要前后端分开发布，遇到的问题是挺多的，不过对自己来说也算是一种经历吧。一．.netCore 项目发布1.1 修改环境...
.NET Core Vue
KingCruel的专栏
04-04 668
.NET Core Vue
vue+netcore项目打包发布部署详细步骤，以及报错处理
02-17
Vue+NETCore项目的打包、发布、部署流程涉及到前端Vue项目的构建、后端.NET Core项目的编译和打包，以及生产环境的配置和部署。在整个过程中，报错处理方法的掌握对于快速定位问题、解决问题至关重要。随着CI/CD的...
vue+webapi（.netcore3.1）轻量级框架
07-22
Vue 2 和 Vue 3 都是 Vue.js 的主要版本，分别在2016年和2020年发布。Vue 2 侧重稳定性和社区支持，而 Vue 3 则引入了更现代的语法、性能提升和更好的类型检查，适用于 TypeScript 开发者。 .NET Core 3.1 是微软...
Vue.NetCore-master_volvue_vue.netcore_vue.netcore_vol_volnetcore
10-03
"Vue.NetCore-master_volvue_vue.netcore_vue.netcore_vol_volnetcore"这个标题可能指的是一个项目，该项目结合了Vue.js和.NET Core，用于前端和后端的开发。"master"通常表示这是项目的主要分支，意味着是最稳定或...
asp.netCore+vue +SignalR
12-08
通过研究这个项目，你可以深入理解如何将ASP.NET Core、Vue和SignalR结合，构建一个实时的Web应用。 总结来说，ASP.NET Core、Vue.js和SignalR的组合提供了一种强大且高效的实时Web应用开发方案。通过理解这三个...
将.net应用部署到Linux服务器
shenxiaomo1688的博客
07-09 890
上面的命令如果窗口关闭，则程序退出。下面将其设置为持久化运行。如果使用了其他环境变量（如数据库连接、日志路径等），也可以在。服务启动好了，后面可以配置nginx进行域名访问了。如果输出下面的内容则表明则程序已经在运行了。若应用运行失败，可用。
ASP.NET Core2.2+Vue.js+mysql+redis开发的网站框架
03-26
ASP.NET Core2.2+Vue.js+mysql+redis开发的网站框架，搭建的框架实例。后期会持续更新。
Vue.NetCore：.NetCore + Vue，前阶段分离，支持前一段业务代码扩展的快速开发框架，Vol.Vue为前端项目，Vue.Net后台项目
02-05
Vue + .NetCore前初步分离，支持对前端，后台基础业务代码扩展的快速发开框架 框架核心 快速开发（基础功能全部由代码生成器生成） 支持前端，后台自定义业务代码扩展，后台提供常规通用扩展与通用类 前端，后台提供了近300个扩展方法与属性，开发人员可在此功能上编写扩展自定义业务代码 代码生成（代码生成器可直接生成主/从表前预期业务代码，有30种属性可在线配置生成的代码） 前端表格自动转换键/值 前端表单select / checkbox自动绑定数据源，不需要写任何代码 支持（主从表）一对一前代码自动生成，并支持数据源自动绑定与业务代码扩展，不需要写任何代码 支持一对多从表自定义扩展（不限
把ASP.NET项目发布到服务器上
weixin_53911715的博客
12-25 874
https://blog.csdn.net/weixin_46285416/article/details/107722670 我觉得你肯定会了，这么详细,所以打不了我，哈哈 如果有大佬路过还望赐教 我这里是有一个普通的服务器，但是不符合环境，所以手把手配置 如果是学生学习使用的话，这有一篇白嫖阿里云服务器的方法 ECS网页配置服务器部分 服务器的数据库部分 web项目部分 服务器系统选用window服务器，如果不是的话，先停止运行服务器，然后在实例里点击 更多–》磁盘和镜像–》更换操作系统
.net core集成vue
01-10 2783
react、angular、vue 你更熟悉那个？下边这个是vue的。 git：https://github.com/WalkerLu/DotnetCoreWithVue.git 要求 需要你的计算机安装有 • .net core 2.0以上版本 • node、webpack、vue-cli、vue （npm install 默认版本即可） • visual...
.net发布项目到服务器，文件形式
lyk520dtf的博客
07-12 1297
上次抽风说了一下弄个更简单的发布项目的文章，今天被迫兑现了（＞人＜；）
.Net6 Web项目部署到Linux Docker
guiliangfeng的专栏
11-14 1112
需求：在阿里云ECS服务器（Windows Server 2019）上安装了MySQL，里面有一个数据库School，数据库中有一张表Student记录学生信息。现在要用asp.net core web项目把这些学生信息展示出来。这个web项目要部署到另一台阿里云ECS服务器（Linux/CentOS 7.9）的Docker里面。
.net core + vue 搭建前后端分离的框架
战族狼魂的博客
08-01 2842
确保你的开发环境中已安装了最新版本的.NET Core SDK。你可以从获取最新版本。： 在命令行或者通过Visual Studio等集成开发环境，创建一个新的.NET Core Web API项目。： 如果需要特定的功能（例如身份验证、数据库访问等），可以添加相应的NuGet包。： 在生成的.NET Core项目中编写你的后端API，定义控制器和服务，连接数据库等。
.NET + Vue3 的前后端项目在IIS的发布
qq_61709335的博客
02-17 2975
2）然后在 [高级设置] 中，把 [启用 32位应用程序] 的值设置成 [false]，然后下滑，找到 [标识]，将 [标识] 的值设置成 [LocalSystem]。网址部署好后，想测试网址的功能是否正常，发现网址的数据获取和新增功能都正常，但当修改和删除数据时，发现网址报405错误，这是什么原因造成的呢？这个错误是你项目文件夹中没有项目导致的，看看你的网址指向的物理路径是否正确，在指向的这个文件夹中是否有项目存在。3）在 IIS 的网站中，选择部署的项目，点击 [绑定] ，分别配置 IP 地址。
vue + netcore 教程
08-12
### 集成概述 将 Vue.js 与 ASP.NET Core 集成可以构建高性能的全栈 Web 应用程序。Vue.js 是一款轻量级且灵活的前端框架，它采用 MVVM 架构模式，便于构建交互式用户界面[^3]。而 ASP.NET Core 是一种跨平台、高性能的后端框架，支持创建 RESTful API 和动态 Web 应用。通过将两者结合，可以充分发挥 Vue.js 的响应式特性和 ASP.NET Core 的可扩展性。 ### 项目搭建 #### 后端配置 首先，创建一个 ASP.NET Core 项目，可以通过 Visual Studio 或 .NET CLI 完成。创建完成后，可以添加控制器以提供 API 端点。例如： ```csharp [ApiController] [Route("[controller]")] public class SampleDataController : ControllerBase { [HttpGet] public IActionResult GetData() { return Ok(new { Message = "Hello from ASP.NET Core!" }); } } ``` #### 前端配置 在前端，使用 Vue CLI 创建 Vue.js 项目。可以通过以下命令快速创建： ```bash vue create vue-app cd vue-app npm run serve ``` 接下来，将 ASP.NET Core 配置为托管 Vue.js 前端应用。可以通过 `Microsoft.AspNetCore.SpaServices` 包来集成 Vue.js 开发服务器与 ASP.NET Core。在 `Startup.cs` 文件中添加以下代码： ```csharp app.UseSpa(spa => { spa.Options.SourcePath = "ClientApp"; // Vue.js 项目路径 if (env.IsDevelopment()) { spa.UseVueCli(npmScript: "serve"); } }); ``` ### 通信机制 Vue.js 组件可以通过 `axios` 或 `fetch` 与 ASP.NET Core 后端进行通信。例如，在 Vue.js 中调用 API： ```javascript import axios from 'axios'; export default { data() { return { message: '' }; }, mounted() { axios.get('/SampleData/GetData') .then(response => { this.message = response.data.Message; }) .catch(error => { console.error('Error fetching data:', error); }); } }; ``` ### 路由配置 在 Vue.js 中，使用 `vue-router` 可以实现单页应用（SPA）的路由功能。安装并配置路由： ```bash npm install vue-router@4 ``` 创建 `router.js` 文件： ```javascript import { createRouter, createWebHistory } from 'vue-router'; import Home from './views/Home.vue'; const routes = [ { path: '/', component: Home } ]; const router = createRouter({ history: createWebHistory(), routes }); export default router; ``` 在 `main.js` 中引入路由： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; createApp(App).use(router).mount('#app'); ``` ### 状态管理 对于复杂的状态管理，可以使用 `Vuex` 来管理全局状态。安装 `Vuex`： ```bash npm install vuex@next ``` 创建 `store.js` 文件： ```javascript import { createStore } from 'vuex'; const store = createStore({ state() { return { count: 0 }; }, mutations: { increment(state) { state.count++; } }, actions: { increment({ commit }) { commit('increment'); } }, getters: { count: state => state.count } }); export default store; ``` 在 `main.js` 中引入 `Vuex`： ```javascript import { createApp } from 'vue'; import App from './App.vue'; import store from './store'; createApp(App).use(store).mount('#app'); ``` ### 开源项目推荐 可以参考 `aspnetcore-Vue-starter` 项目，这是一个由 TrilonIO 维护的 ASP.NET Core 与 Vue.js 集成的启动模板。该项目集成了 Web API、Vuex 状态管理、热模块替换（HMR）等现代前端开发特性[^4]。 ### 相关问题 1. 如何在 ASP.NET Core 中配置 Vue.js 开发服务器？ 2. 如何在 Vue.js 中调用 ASP.NET Core 提供的 RESTful API？ 3. 如何在 Vue.js 中使用 Vuex 进行状态管理？ 4. 如何在 ASP.NET Core 项目中引入 Vue CLI 并启用热模块替换？ 5. 如何将 Vue.js 单页应用部署到 ASP.NET Core 服务器上？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值