使用concurrently模块-同时启动react项目和mock模拟接口

简介: 使用concurrently模块-同时启动react项目和mock模拟接口

上一节前面在react项目里面,添加了mock模拟接口,我们知道,启动react项目的命令是npm start,启动模拟接口的命令 是json-server mock/db.js,但是同在react项目的根目录底下,该怎么办?如何才能实现一个命令能够同事启动两个服务?


当要同时启动后台服务,和前端服务的时候,我们可以使用concurrently模块。


1:全局安装concurrently模块

打开cmd,右键以管理员身份运行,全局安装concurrently模块。

cnpm insatll -g concurrently


2:修改package.json配置

安装完成以后,进入react项目里面,找到package.json配置文件,修改启动配置,将启动react项目的命令和启动模拟接口的命令都写在scripts里面。

  "scripts": {
    "server":"react-scripts start",
    "json_server":"json-server mock/db.js --port 3003",
    "start": "concurrently \"npm run json_server\" \"npm run server\" ",
  },

3:输入正常启动命令
npm  start

4:打开浏览器访问

这个时候,打开浏览器,在浏览器分别输入接口数据端口3003和项目访问端口3000,可以发现都可以访问啦,(为了区分可以用命令启动指定端口。)





相关文章
|
3月前
|
前端开发 JavaScript
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
本文介绍了在React项目中实现路由懒加载的方法,使用React提供的`lazy`和`Suspense`来优化项目首次加载的速度。通过将路由组件改为懒加载的方式,可以显著减少初始包的大小,从而加快首次加载速度。文章还展示了如何使用`Suspense`组件包裹`Switch`来实现懒加载过程中的fallback效果,并提供了使用前后的加载时间对比,说明了懒加载对性能的提升作用。
256 2
React项目路由懒加载lazy、Suspense,使第一次打开项目页面变快
|
3月前
|
前端开发 JavaScript Java
SpringBoot项目部署打包好的React、Vue项目刷新报错404
本文讨论了在SpringBoot项目中部署React或Vue打包好的前端项目时,刷新页面导致404错误的问题,并提供了两种解决方案:一是在SpringBoot启动类中配置错误页面重定向到index.html,二是将前端路由改为hash模式以避免刷新问题。
313 1
|
1月前
|
前端开发 JavaScript
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
|
3月前
|
前端开发 JavaScript UED
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
在React或Vue中,若需在更改用户所属组后更新页面所有数据但不刷新整个页面,可以通过改变路由出口的key值来实现。在用户切换组成功后,更新key值,这会触发React或Vue重新渲染路由出口下的所有组件,从而请求新的数据。这种方法避免了使用`window.location.reload()`导致的页面闪烁,提供了更流畅的用户体验。
59 1
react或者vue更改用户所属组,将页面所有数据进行替换(解决问题思路)____一个按钮使得页面所有接口重新请求
|
3月前
|
移动开发 前端开发
react项目配合diff实现文件对比差异功能
在React项目中,可以使用`diff`库实现文件内容对比差异功能。首先安装`diff`库,然后在组件中引入并使用`Diff.diffChars`或`Diff.diffLines`方法比较文本差异。通过循环遍历`diff`结果,可以生成不同样式的HTML元素来高亮显示文本差异。
160 1
react项目配合diff实现文件对比差异功能
|
3月前
|
前端开发 算法 JavaScript
React项目input输入框输入自动失去焦点
本文讨论了在React项目中如何处理input输入框自动失去焦点的问题,特别是在移动端开发中。文章提供了一个使用React Native的TouchableWithoutFeedback组件来监听点击事件,并在事件处理函数中通过调用Keyboard.dismiss()方法使输入框失去焦点的示例代码。这种方法可以确保在用户点击页面其他区域时,键盘能够收起,输入框失去焦点。
126 1
React项目input输入框输入自动失去焦点
|
3月前
|
JavaScript 前端开发 应用服务中间件
本地运行打包好的React、Vue项目
本文讨论了如何本地运行打包好的React和Vue项目,并解决了使用React-Router时Tomcat部署刷新页面导致404的问题,提出了将请求转回index.html的解决方案。
40 1
本地运行打包好的React、Vue项目
|
2月前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
758 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
6月前
|
存储 缓存 前端开发
react怎么只让接口请求一次
react怎么只让接口请求一次
114 0
|
3月前
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)