前言

本文基于 (“react”: “^16.13.1”) 版本

1.参考 express 下的 package.json 文件

express的服务启动命令为:npm start

在这里插入图片描述

2.打开 react 项目的 package.json 文件,进行改写,增加 server 命令

路径为 express项目名 /bin/www,须根据自己项目express服务文件夹名称进行改写

"server": "node server/bin/www",

在这里插入图片描述

3.在react项目路径的基础上,启动express服务

npm run server

出现如下

在这里插入图片描述

4.express实现自动刷新 (热加载)

express 默认是没有热加载的,每次更改接口都需要重新启动,不然不生效

使用 nodemon 实现 express 热加载。

npm  install nodemon --save

5.改写 package.json (注意是react项目的package.json)

node 更改成 nodemon

"server": "nodemon server/bin/www",

在这里插入图片描述

6.启动 npm run server

npm run server

至此配置热加载完成,以下为一条命令同时启动react项目以及express服务

7.使用 concurrently (一条命令同时启动react项目以及express服务)

npm install concurrently --save

还是修改react项目的package.json,增加 dev 命令

"dev": "concurrently \"npm start\" \"npm run server\"",

在这里插入图片描述
8. 使用 dev 命令同时启动react项目以及express服务端

npm run dev

启动成功

在这里插入图片描述

如果本篇文章对你有帮助的话,很高兴能够帮助上你。

当然,如果你觉得文章有什么让你觉得不合理、或者有更简单的实现方法又或者有理解不来的地方,希望你在看到之后能够在评论里指出来,我会在看到之后尽快的回复你。

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐