使用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,可以发现都可以访问啦,(为了区分可以用命令启动指定端口。)


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容