使用React.js+JSON Server开发的项目，如何生成可分享的index.html供同事查看？

一、打包React项目为静态资源 #

1. 确认项目package.json中已配置build命令，执行打包：

   npm run build
   

   执行完成后，项目根目录会生成build文件夹，包含index.html及所有编译后的静态资源。

二、整合JSON Server模拟数据 #

由于JSON Server是独立后端服务，直接打包无法包含接口逻辑，可通过以下两种方案处理：

方案1：静态JSON文件替代接口（无需后端服务） #

• 将JSON Server使用的db.json复制到React项目的public目录。
• 修改React组件中的接口请求地址：把原http://localhost:xxx/xxx这类请求，改为/db.json，或直接通过import data from './db.json'引入本地数据。
• 重新执行npm run build，此时打包后的静态文件可直接读取本地模拟数据，无需启动额外服务。

方案2：保留RESTful接口形式（需简单启动服务） #

如果需要保留接口的RESTful特性，可将React静态文件与JSON Server整合：

1. 安装依赖（若未安装）：

   npm install json-server --save-dev
   

2. 项目根目录创建server.js：

   const jsonServer = require('json-server');
   const server = jsonServer.create();
   const router = jsonServer.router('db.json');
   const middlewares = jsonServer.defaults({
     static: './build' // 指向React打包后的静态文件夹
   });
   
   server.use(middlewares);
   server.use(router);
   server.listen(3001, () => {
     console.log('Demo服务运行在 http://localhost:3001');
   });
   

3. 执行node server.js启动服务，访问http://localhost:3001即可同时查看React页面和接口数据。

三、分享方式 #

• 方案1：将build文件夹打包发送，团队成员可通过本地静态服务器（如npx serve build）打开index.html，或直接部署到静态服务器上。
• 方案2：将build、db.json、server.js及package.json打包发送，团队成员执行npm install后启动node server.js即可访问。

内容的提问来源于stack exchange，提问作者Akky