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

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

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

1:全局安装concurrently模块

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

cnpm insatll -g concurrently
使用concurrently模块-同时启动react项目和mock模拟接口
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\" ",
  },
使用concurrently模块-同时启动react项目和mock模拟接口
3:输入正常启动命令

npm  start
使用concurrently模块-同时启动react项目和mock模拟接口
4:打开浏览器访问

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

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

原文出处:简书【祈澈菇凉】

原文链接:https://www.jianshu.com/p/b6f76e12d671

本文观点不代表Dotnet9立场,转载请联系原作者。

发表评论

登录后才能评论