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