MEVN栈应用本地及Heroku部署时首页无法访问ENOENT报错求助

问题原因 #

• Vue 3执行npm run build生成的前端产物默认存放在dist目录，你当前server.js中所有引用前端产物的路径都写的是build（该目录是React项目默认的打包产物目录），路径不匹配导致系统找不到index.html文件，抛出ENOENT报错。
• 你额外写的根路径/路由逻辑放在了生产环境判断之外，会优先命中该错误路径的路由规则，同时导致生产环境配置的*通配路由失效。

修复步骤 #

1. 替换所有前端产物路径：将server.js中所有的client/build统一修改为client/dist
2. 删除冗余的根路由代码：移除下面这段单独配置的根路由：

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

3. 调整静态资源与路由匹配逻辑，适配本地与生产环境：
   将生产环境判断内的逻辑调整为全环境生效，同时修正路径，修改后的对应代码如下：

// 挂载前端静态资源
app.use(express.static(path.join(__dirname, "client/dist")));

app.get('/api/users', (req, res) => {
  res.json({ user: 'test' })
})

const port = process.env.PORT || 3000;

// 所有非api请求返回前端入口文件，支持前端路由history模式
app.get("*", (req, res) => {
  res.sendFile(path.resolve(__dirname, "client", "dist", "index.html"));
});

Heroku部署额外配置 #

如果你的Git仓库没有上传client/dist目录，需要在根目录的package.json的scripts字段中添加自动打包脚本，让Heroku部署时自动构建前端产物：

"scripts": {
  "start": "node server.js",
  "build": "cd client && npm install && npm run build"
}

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