MERN应用部署Heroku运行heroku local空白页、MIME类型报错如何解决？

你遇到的MIME类型报错本质是浏览器请求CSS/JS等静态资源时，服务端没有找到对应资源，反而返回了index.html的内容，针对你给出的配置，问题点和修复方案如下：

1. 修复服务端package.json的heroku-postbuild脚本 #

你当前的脚本存在逻辑错误：install-client是服务端根目录package.json的命令，进入client目录后不存在该命令，会导致客户端依赖安装失败、build产物生成异常。
把服务端package.json的scripts字段里的heroku-postbuild修改为：

"heroku-postbuild": "npm run install-client && npm run build"

2. 修复服务端路由及静态资源配置 #

2.1 确保path模块已引入 #

你服务端入口文件是app.js，注意和配置的文件名统一，在文件顶部加入path模块引入：

const path = require('path')

2.2 调整路由顺序 #

app.get('*') 这条捕获所有路由的代码必须放在所有其他API路由、业务路由的后面，否则会优先拦截静态资源、API的请求，直接返回index.html。

2.3 适配本地heroku local测试场景 #

heroku local默认不会自动设置NODE_ENV=production，可以临时去掉静态资源服务的环境判断，或者启动前手动设置环境变量，确保静态资源可以正常加载：

// 直接去掉环境判断，或者启动前执行 export NODE_ENV=production（Windows系统用set NODE_ENV=production）
app.use(express.static(path.join(__dirname, 'client', 'build')));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'client', 'build', 'index.html'))
});

3. 可选：补充React端homepage配置 #

在client目录的package.json中加入homepage字段，指定build产物的根路径，避免相对路径加载异常：

"homepage": "."

4. 验证流程 #

修改完成后按以下步骤测试：

• 先进入client目录执行npm install && npm run build，确认build目录正常生成，目录内包含static/css、static/js等静态资源文件夹
• 回到服务端根目录执行heroku local，重新访问localhost:5000验证

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