内置Express服务的Vue3 SSR应用部署Heroku端口绑定失败如何解决

你遇到的R10错误核心原因是Vue CLI打包服务端代码时，内置的DefinePlugin会在构建阶段把代码里的process.env.*变量替换为构建阶段的环境变量值，变成硬编码写入serverBundle.js，而不是保留运行时读取逻辑。Heroku的PORT环境变量是运行阶段才注入的，构建阶段不存在，所以打包后的代码里端口配置无效。另外如果Express服务监听时绑定了localhost，也会导致Heroku无法检测到端口绑定成功。

1. 调整vue.config.js配置，保留PORT运行时读取 #

修改服务端构建的Webpack配置，禁止打包工具预替换process.env.PORT变量：

// vue.config.js 核心修改部分
module.exports = {
  // 保留你原有的其他配置
  chainWebpack: webpackConfig => {
    // 仅服务端构建生效
    if (process.env.WEBPACK_TARGET === 'node') {
      webpackConfig.plugin('define').tap(args => {
        // 移除DefinePlugin中对PORT的预定义，保留运行时读取逻辑
        delete args[0]['process.env'].PORT
        return args
      })
    }
  }
}

2. 调整.env文件配置 #

把你根目录.env文件里的PORT=8080配置移到.env.local文件中，.env.local仅用于本地开发，不会被提交到代码仓库，也不会在Heroku构建阶段被加载。

3. 修改Express服务监听逻辑 #

调整端口取值和监听地址，兼容Heroku运行环境要求：

const port = process.env.PORT || 8080
// 必须监听0.0.0.0，不能绑定localhost，否则Heroku无法检测端口绑定
server.listen(port, '0.0.0.0', () => {
  console.log(`Application is accessible on : http://localhost:${port}`)
})

4. 配置Heroku启动命令 #

在package.json的scripts字段中添加正确的启动指令：

{
  "scripts": {
    "start": "node dist/server/serverBundle.js",
    // 保留你原有的build等其他脚本配置
  }
}

构建完成后在本地执行命令PORT=3000 node dist/server/serverBundle.js，检查服务是否正常监听3000端口，验证通过后推送到Heroku即可正常部署。

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