在Heroku部署Vue.js项目时报错，按教程操作后问题仍未解决

问题描述 #

我正在尝试将Vue.js项目部署到herokuapp上，参考对应教程操作后访问站点出现错误：

CLI返回的报错信息如下：

我在package.json中特意删除了build.js相关配置，因为本地不存在这个同名文件，怀疑是这个操作导致的问题，但添加相关配置后报错会更严重。
我的package.json配置如下：

解决步骤 #

• 首先确认项目创建使用的Vue CLI版本，Vue CLI 3+版本的项目默认没有build.js文件，你参考的旧教程配置适配的是更早的2.x模板项目，无需硬加对应配置。
• 修正package.json中的脚本配置，确保包含以下字段：

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "start": "node server.js"
  },
  "engines": {
    "node": "替换为你本地使用的Node.js版本，比如16.x",
    "npm": "替换为你本地使用的npm版本"
  }
}

• 在项目根目录新增server.js文件，用于Heroku启动时托管静态资源，内容如下：

const express = require('express')
const serveStatic = require('serve-static')
const path = require('path')

const app = express()
app.use('/', serveStatic(path.join(__dirname, '/dist')))
// 适配单页应用路由回退逻辑，避免刷新出现404
app.get(/.*/, function (req, res) {
  res.sendFile(path.join(__dirname, '/dist/index.html'))
})

const port = process.env.PORT || 8080
app.listen(port)

• 安装静态服务依赖：执行npm install express serve-static --save，确保依赖被写入package.json的dependencies字段。
• 确认.gitignore文件没有排除node_modules之外的必要配置文件，不需要把本地构建的dist目录提交到Git仓库，Heroku部署时会自动执行npm run build生成对应静态资源。
• 重新提交代码到Heroku完成部署即可。

内容的提问来源于stack exchange，提问作者Noob-Dev95