配置vue前端服务器及express服务器端的服务器同时运行——concurrently

最新推荐文章于 2025-03-17 11:27:02 发布
最新推荐文章于 2025-03-17 11:27:02 发布
阅读量1k 收藏 2
点赞数 1
分类专栏： 学习记录 web前端 文章标签： 前端 vue.js 服务器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/angrynouse/article/details/126126600
版权
本文介绍了如何使用concurrently工具来简化前端Vue项目与后端Express服务器的启动流程，通过在package.json中配置命令，实现一键同时启动前后端服务器，避免了分别手动启动的繁琐步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

设置命令行同时运行两个服务器

让前后端的服务器同时运行

说明：后端服务器用的node的express框架模拟的
因为运行时，前后端都要以服务器方式打开，所以要在后端代码文件夹根目录终端执行一个node index.js命令，还要在前端项目根目录终端执行一个npm run serve命令，操作比较麻烦。

引出：可以通过concurrently设置，使用一行命令，让前后端服务器同时运行。

1. 安装concurrently依赖

// win+r命令行全局安装
npm install -g concurrently

安装成功效果展示：
在这里插入图片描述

2. package.json中添加以下语句

"dev": "concurrently \"npm run serve\" \"node 自定义的node服务器文件夹名/index.js\""

在这里插入图片描述

3. 项目根目录终端运行该命令行，即可同时打开前后端服务器

   npm run dev
vue+node+express 部署到服务器
weixin_43840538的博客
10-28 2638
参考博客，觉得我废话太多，一定要看，写的简洁明了 前言 这个问题可能对有些人来说不是事，而且网上有很多关于部署的博客，但是对于那种状态下的我都毫无帮助，直到今天，这个困扰我一个月零十天的问题，解决了。。。 所以，我必须写这篇博客，来帮助那些极少数和我相似问题的人！ 像我们这些自学派，基本上就是看文档，看视频，而且看视频的时候，难免一些新的东西了解不够透彻，只是跟着视频作者的代码风格进行使用，但是...
vue2+node.js后端配合express框架实现前后端本地联调
lanbaiyans的博客
04-07 2033
vue2+node.js后端配合express框架实现前后端本地联调，（express框架的get，post请求如何传参如何获取前端传入参数）代码拿来即用。node.js简单搭建服务器，vue2的axios封装，代理配置
express+vue实现前后端联合
随风的博客
04-10 466
项目GitHub地址：https://github.com/To0night/express-vue。前端使用vite搭建vue项目。后端使用express开发接口。
vue2 使用 vite 管理多个项目，实现各子项目独立运行，独立打包
最新发布
weixin_67722778的博客
03-17 350
vue脚手架初始化之后的项目，每个项目都是独立的，导致项目多了之后，node依赖包过多，占用内存较多。想实现的效果是：一个项目结构管理多个子项目，子项目运行或者打包后都可以是独立的，但是共用一个node依赖包文件。
concurrently第三方库 —— 一条命令同时启动后端服务器和前端Vue项目（开发期间小技巧）
Concise200的博客
03-08 2248
在写项目的过程中发现了一个很好用的第三方包concurrently，可以通过一条命令npm run dev同时启动后端服务器与前端Vue项目、在开发期间非常方便。 注意：但是最好先把前端项目的文件夹放到后端的文件夹中!!（开发完再移出，并删除配置即可） 1.执行npm i concurrently进行安装 2.在前端项目的package.json的scripts中添加"start": "npm run serve" "scripts": { "start": "npm run serve" }
vue + express的集成
qq_20074443的博客
01-08 3775
node环境下集成 vue+express 写在前面 前端小白一个，刚加入前端这个浩浩荡荡的大军的时候，前后端分离已经是一个大趋势了，所以秉持着一个学习的态度，尝试着搭建了一个vue+express的环境 创建vue项目 搭建脚手架 npm install -g vue-cli 创建基于webpack的项目 vue init webpack testapp 安装依赖并运行项目 ...
选择大学应用程序的服务器与客户端启动指南
- 全部：这通常是指一个脚本会同时启动服务器端和客户端，比如在`package.json`中定义的`"start-all": "concurrently \"npm run serve\" \"npm run client\""`。这里的`concurrently`是一个常用的npm包，它允许并行...
koa和vue项目前后端联动启动
瑞朋哥的博客
05-10 1449
最近学习前后端的全栈项目，头大的要命，慢慢发现，自己越用功想研究一门技术，越发现不懂的慢慢越多，真是有点打击信心。 好在，今天终于把前后端的基础框架搭起来了，后续文章分享学习经验。 今天分享是前后端联动启动 首先安装concurrently 然后安装vue项目 vue -V 我现在已经装上3.0版本了。 vue create client 按照提示把vue-router ...
在vue中同时跑两个服务配置和跨域问题的配置
weixin_45178761的博客
01-11 2204
1:同时跑两个服务配置： 1：cnpm i concurrently -D 2:在package.json中。 "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "server": "nodemon server.js", "dev": "concurrently \"npm run s...
npm run dev 同时运行vue前端项目和node后端项目
效率开发者手札
05-31 676
npm run dev 同时运行vue前端项目和node后端项目
VUE使用代理实现前后端代码联调
tinalucky的专栏
06-07 5076
现在很多公司都比较流行前后端开发分离，比如前端开发是一波人，后端开发是另一波人。这样可以更好体现术业有专攻以及提升整体项目的效率。使用常规的HTML/JS/CSS等开发还好办，大家可以在同一个环境里协同开发。但去到用VUE做前端开发的环境里，这种常规的协同方式显然是行不通的，因为VUE的代码是不能直接使用到项目上，要通过编译输出成HTML/JS/CSS才能部署到开发环境的。这样就会引发另一个问题，VUE的开发环境与后端的开发环境不在同一个上，比如前端用的是VSCODE开发VUE，而后台可能使用...
结合 服务器+后端+前端，完成 vue项目 后台管理系统
热门推荐
技术前端，忠于热爱 @0.活在风浪里
01-23 1万+
亲测可用 gitee 网址 包括php包，后端node.js代码，前端源码 以及文档接口说明 + 结合 服务器+后端+前端，完成 vue项目 后台管理系统
vue-cli怎么和express搭建项目！
原鑫的个人博客
10-26 3264
1.其实自动解除vue一来,就一直在想这个问题,问题是:express后台有一个服务是3000端口,然后vue-cli又开启了一个8080端口, 那么怎么把他们两个结合在一起呢? 要跨域吗? 部署到服务器的时候应该运行这个npm run dev的命令吗和npm run build的命令吗???等等一大堆的问题 2.原因在于现在太多的前端工具帮我们做了太多，而我们只学会了打命令，而没有搞清楚这些命令...
nodejs+express+react，前后台同一个目录下启动，解决方案
无聊写写~
02-28 996
nodejs+express+react，前后台同一个目录下启动，解决方案 这篇文章比较简单和基础，主要是对另一个帖子的补充，原网址如下： JS全栈第一步 - 连接 React 和 Node，Express https://www.songbingjia.com/jingpin/show-67944.html 大部分开源的打包项目中，前后端是在一个大的目录下写的，如果在api目录使用npm start只会启动后端，如果在项目根目录下使用npm start只会启动前端，如果想同时启动前端和后端，推荐做法是打开
将vue项目打包放到本地的express上
sunshineTing2的博客
07-21 339
将vue项目打包放到本地的express上 第一步: 全局安装express npm install -g express 如果运行express test的时候报错：express不是内部或者外部命令 npm install -g express-generator 解决方法：执行npm install -g express-generator,因为新版的express的将命令行工具分离出来了，所以要自己重新安装。 第二步: 创建一个名为myapp的应用 express myapp //创建一个名为m
express 启动服务访问本地vue打包项目
u010963051的博客
10-07 391
无
如何使用npm指令同时启动vue前端和python后端
m0_57236802的博客
12-10 723
要使用 npm 指令同时启动 Vue 前端和 Python 后端，您可以在项目的。文件中设置一个自定义脚本来同时运行两个服务。或类似的工具来实现的，它允许在同一个命令下并行运行多个命令。分别是启动 Vue 应用和 Python 服务器的命令，而。时，Vue 前端和 Python 后端将同时启动。为您的 Python 后端实际文件路径。命令将同时运行这两个命令。这样设置后，当您运行。
vite+vue3构建前端和多个后端服务器联调
weixin_43134304的博客
06-15 2071
vue3 构建前端与多个后端及测试服务器联调
vue项目连接多个服务后台地址
qq_57305148的博客
06-28 1066
场景描述：由于公司项目需要基于若依框架和starlingX后台开发，所以，项目至少要连接两个后台地址。在 vue.config.js 文件里 添加一个地址。新建一个接口请求文件，并引入request.js文件。
Nginx部署：高性能web服务器与Vue项目整合指南
Nginx是一款高性能的Web...将前端Vue.js项目部署到Nginx上，不仅提升了应用的性能和可扩展性，还简化了服务器管理流程，使得前端开发者可以专注于应用程序本身，而将基础设施运维的工作交给Nginx这样专业的服务器软件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值