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

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

方法一

添加& npm run server
在这里插入图片描述
注意:Windows系统不可行

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

1、安装 concurrently 插件

npm install concurrently -D 

2、配置 npm 命令
在 package.json 中配置 start 命令:
在这里插入图片描述

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

参考博文

文档一
文档二
文档三

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/854470.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

牛客热题:最长回文子串

📟作者主页:慢热的陕西人 🌴专栏链接:力扣刷题日记 📣欢迎各位大佬👍点赞🔥关注🚓收藏,🍉留言 文章目录 牛客热题:最长回文子串题目链接方法一&am…

鸿蒙开发:【启动本地PageAbility】

启动本地PageAbility PageAbility相关的能力通过featureAbility提供,启动本地Ability通过featureAbility中的startAbility接口实现。 表1 featureAbility接口说明 接口名接口描述startAbility(parameter: StartAbilityParameter)启动Ability。startAbilityForRes…

Linux之网络编程

Linux之网络编程 TCP协议 TCP(Transmission ControlProtocol) : 传输控制协议,是一个 面向连接的、可靠的、基于字节流的传输层的协议。TCP 协议建立的是一种点到点的,一对一的可靠连接协议 特点: 数据无丢失数据无失序数据无错误数据无重…

振动分析-3-基于Python的FFT幅值修正与能量修正

幅值修正与能量修正过程(更正) 参考什么是泄漏? 参考什么是窗函数? 参考使用python实现快速傅里叶变换(FFT) 参考频谱泄露和窗函数以及加窗后幅度修正和python代码实现 1 快速傅里叶变换(FFT) 离散傅里叶变换(discr…

84. 柱状图中最大的矩形(hard)

单调栈&#xff1a; 就是说&#xff1a;固定高度&#xff0c;寻找最长宽度&#xff0c;如何找最长宽度&#xff0c;需要从heights[i] 这一个元素开始向左向右两边寻找heights[j] <heights[i]的j元素&#xff0c;也就是找两边第一小于heights[i]的元素。此过程中就是利用到单…

PCA 在图像分析上的应用

同一物体旋转角度求取 直接上代码&#xff1a; import cv2, os import numpy as np import timedef perform_pca(image, num_components):# 将图像转换为浮点型img_float np.float32(image)img_flatten img_float.reshape(-1, 2)# 计算均值和协方差矩阵mean, eigenvectors …

java面试(企业场景)

设计模式 工厂方法模式 简单工厂模式 简单工厂包括以下角色&#xff1a; 抽象产品&#xff1a;定义了产品的规范&#xff0c;描述了产品的主要特性和功能具体产品&#xff1a;实现或者继承抽象产品的子类具体工厂&#xff1a;提供了创建产品的机会&#xff0c;调用者通过该…

跨链协议中Cosmos IBC、Polkadot/XCM、Celer Network的区别以及用途

跨链协议是实现不同区块链之间通信和价值转移的关键技术。Cosmos IBC、Polkadot/XCM 和 Celer Network 是三个在跨链领域内具有代表性的协议&#xff0c;它们各自有着独特的设计理念和应用场景。下面是这三个协议的详细对比&#xff1a; Cosmos IBC (Inter-Blockchain Communi…

【C++进阶学习】第二弹——继承(下)——挖掘继承深处的奥秘

继承&#xff08;上&#xff09;&#xff1a;【C进阶学习】第一弹——继承&#xff08;上&#xff09;——探索代码复用的乐趣-CSDN博客 前言&#xff1a; 在前面我们已经讲了继承的基础知识&#xff0c;让大家了解了一下继承是什么&#xff0c;但那些都不是重点&#xff0c;今…

Flask-RESTPlus

Flask-RESTPlus库教程 Flask-RESTPlus 是一个用于构建RESTful APIs的Flask扩展&#xff0c;它提供了一些有用的工具来简化API的开发和文档编写。Flask-RESTPlus 包含Swagger文档生成器&#xff0c;使得API文档更加直观和易于维护。 官方文档链接 Flask-RESTPlus官方文档 架…

【代码随想录算法训练Day41】LeetCode 416.分割等和子集

Day41 动态规划第三天 LeetCode 416.分割等和子集 class Solution { public:bool canPartition(vector<int>& nums) {int sum0;// dp[i]中的i表示背包内总和// 题目中说&#xff1a;每个数组中的元素不会超过 100&#xff0c;数组的大小不会超过 200// 总和不会大于…

企业内部、与合作伙伴/客户文档协作如何高效安全地收集资料?

在企业的日常运营与对外合作中&#xff0c;「文件收集」是一项特别常见的文档协作需求。例如&#xff0c;公司举办项目经验分享大会&#xff0c;组织者需要提前收集演讲者的材料&#xff1b;新项目启动时&#xff0c;项目经理需要快速收集技术方案和报价方案以便招投标和商务活…

计算机网络 4.3光纤

第三节 光纤 一、认识光纤 1.传输原理&#xff1a;通过内部的全反射来传输一束经过编码的光信号。 2.光纤通信系统&#xff1a; ①光源&#xff1a;是光波产生的根源。 ②光纤&#xff1a;是传输光波的导体。 ③光发送机&#xff1a;负责产生光束&#xff0c;将电信号转变…

大型Web应用的模块化与组织实践:Flask Blueprints深入解析

目录 一、引言 二、Flask Blueprints概述 三、Flask Blueprints的使用 创建Blueprint对象 定义路由和视图函数 注册Blueprint 使用Blueprints组织代码 四、案例分析 创建模块目录结构 创建Blueprint对象 注册Blueprint 五、代码示例与最佳实践 1. 代码示例 …

一行代码实现鼠标横向滚动

&#x1f9d1;‍&#x1f4bb; 写在开头 点赞 收藏 学会&#x1f923;&#x1f923;&#x1f923; 在项目中我们可能会遇到当鼠标在某个区域内&#xff0c;我们希望滚动鼠标里面的内容可以横向滚动&#xff1b; 比如我们一些常见的后台状态栏&#xff1a; 那这种该怎么写&…

【Linux 12】进程控制

文章目录 &#x1f308; Ⅰ 进程创建01. fork 函数介绍02. 写时拷贝03. fork 常规用法04. fork 调用失败的原因 &#x1f308; Ⅱ 进程终止01. 进程退出场景02. 常见退出方法 &#x1f308; Ⅲ 进程等待01. 进程等待必要性02. 进程等待的方法2.1 wait 方法2.2 waitpid 方法 03.…

php加密验签

签名生成步骤&#xff08;小程序端/前端&#xff09;&#xff1a; 确定参与签名的参数&#xff1a;选择需要参与签名的请求参数&#xff0c;通常包括请求的时间戳、随机数、请求的数据等。 参数排序与拼接&#xff1a;将所有参与签名的参数按照字母顺序排序&#xff0c;并拼接成…

关于禁止word的无用插入模式

这是我的word版本号 点击左上角文件选项 找到左侧最下方的选项 点击高级 把这两个叉掉

第二十篇——去除噪音:如何获得更多更准确的信息?

目录 一、背景介绍二、思路&方案三、过程1.思维导图2.文章中经典的句子理解3.学习之后对于投资市场的理解4.通过这篇文章结合我知道的东西我能想到什么&#xff1f; 四、总结五、升华 一、背景介绍 噪音的原理&#xff0c;换一个维度来看就会很清晰了&#xff1b;通俗易懂…

element-ui将组件默认语言改为中文

在main.js中加入以下代码即可 // 引入 Element Plus 及其样式 import ElementPlus from element-plus import element-plus/dist/index.css// 引入中文语言包 import zhCn from element-plus/es/locale/lang/zh-cn// 使用 Element Plus 并设置语言为中文 app.use(ElementPlus,…