【React】如何使用npm run start命令运行两个服务

我们开发前端项目时,有时候需要本地 mock 数据,这样就需要启动两个服务,一个是接口服务,一个是前端项目。可以安装一个插件来帮助我们通过一个命令启动两个服务。

方法一

添加& npm run server

注意:Windows系统不可行

方法二:Windows系统可行的办法

1、安装 concurrently 插件

javascript 复制代码
npm install concurrently -D 

2、配置 npm 命令

在 package.json 中配置 start 命令:

javascript 复制代码
"scripts": {
    "serve": "craco start",
    "build": "craco build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "server": "json-server ./server/data.json --port 8888",
    "start": "concurrently \"npm run serve\" \"npm run server\""
  },

参考博文

文档一
文档二
文档三

相关推荐
雪碧聊技术4 分钟前
Vue + Element Plus 实现文本溢出显示省略号及悬浮提示
前端·javascript·css·vue.js·文本溢出省略
eric-sjq6 分钟前
0.6B 前端生成模型本地部署实战:消费级显卡跑通 WanlyFrontend 全流程
前端·本地部署
小妖6661 小时前
设置了 box-sizing: border-box; 不管用,下边框还是被挤压没了
前端·css·html
雪隐2 小时前
个人电脑玩AI-16让5060 Ti给你打工——5060Ti 16G 跑 MiniMax-Music-3:从下载到 60s 出歌的全流程
前端·人工智能·后端
张元清2 小时前
React useLatest Hook:在异步回调里读到最新状态 (2026)
javascript·react.js
CAD老兵3 小时前
让 AI Coding Agent 直接访问 CAD 文档:GitMCP 实战指南
前端·人工智能·github
程序员鱼皮3 小时前
DeepSeek Harness 最新邪修曝光!被吹成核弹的极简模式,真的夯吗?
前端·后端·ai编程
无己心3 小时前
面向多平台 AI 搜索引擎的适配层架构设计
前端·人工智能·搜索引擎·ai·1024程序员节
袅沫3 小时前
Nginx中部署多个前端项目——区分路径
服务器·前端
Asize3 小时前
为什么写代码前要先规划组件树?Next.js + Redis 笔记系统实战
前端·javascript·next.js