Express.static无法渲染Create React App根div导致页面空白问题求助

你遇到的问题本质是对Create React App（以下简称CRA）的构建流程认知有误，和express.static的适配性无关：CRA开发阶段运行在3000端口的服务是内置的webpack-dev-server，会实时编译源码并注入到页面中，而未经过构建的CRA源码本身就是无法被express.static直接托管的。

1. 先执行CRA构建命令 #

在CRA项目根目录执行npm run build，命令执行完成后会生成build文件夹，里面包含所有编译后的可托管静态资源：所有React组件会被打包为压缩后的JS文件，自动注入到build/index.html中，符合普通静态项目的结构。

2. 配置Express静态托管逻辑 #

Express服务的配置要注意路径匹配和路由顺序，示例代码如下：

const express = require('express');
const path = require('path');
const app = express();

// 所有自定义接口路由必须写在静态托管规则之前
// app.get('/api/xxx', (req, res) => { ... })

// 托管CRA构建产物
app.use(express.static(path.join(__dirname, 'build')));
// 注：上面的路径需根据你的Express服务文件存放位置调整，
// 如果服务文件放在server子目录，可改为path.join(__dirname, '../build')

// 适配React客户端路由，避免刷新出现404
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(3001, () => console.log('服务已启动在3001端口'));

• 不要直接托管CRA的src或public文件夹：未编译的JSX文件浏览器无法识别，会直接显示空白
• 确认路径正确性：可以打印托管的路径字符串，确认指向的是build文件夹的绝对路径
• 开发阶段可直接用代理简化配置：在CRA的package.json中新增配置项 "proxy": "http://localhost:3001"，开发时前端3000端口的接口请求会自动转发到后端服务，不需要每次修改前端代码都重新构建。

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