【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\""
  },

参考博文

文档一
文档二
文档三

相关推荐
Darling噜啦啦4 小时前
React 组件化实战:从 TodoList 吃透父子通信与状态管理
react.js
用户059540174464 小时前
LLM对话记忆测试踩坑实录:手工回归30分钟,自动化后2分钟发现3个隐藏Bug
前端·css
Ashley的成长之路6 小时前
前端性能优化实战手册·第2篇:资源加载策略全解
前端·性能优化·资源加载·http/3·性能优化实战·资源加载优化
浅水壁虎6 小时前
vue基础(第二章 )
前端·javascript·vue.js
界面开发小八哥6 小时前
界面控件DevExtreme v26.1新版亮点——支持Angular 22
前端·javascript·angular.js·devexpress·ui开发·devextreme
Getflare6 小时前
前端 + UI 设计 + AI:这不是三个工种,是一个新三角能力模型(附自检清单)
前端·人工智能·ui
oil欧哟6 小时前
我做了一个 Vibe Coding 术语学习站:VibeHub
前端·ai·agent·独立开发·vibe coding
审小匠OpenCPAi7 小时前
银行流水核查怎么自动化?单边匹配、双向勾稽与图聚类异常检测的工程对比
java·前端·人工智能·python·审计
Revolution617 小时前
一个公共表格组件,是怎么一步步失控的
前端·前端工程化