如何将 Heroku 生成的服务器端口应用到我的前端 Vue.js 应用程序？

Posted 2023-03-07

【中文标题】如何将 Heroku 生成的服务器端口应用到我的前端 Vue.js 应用程序？

【英文标题】：How can I apply the Heroku generated server port to my front-end Vue.js app?

【发布时间】：2019-06-06 23:38:53

【问题描述】：

这个问题类似于服务器和客户端之间通信的更一般的问题，但是这个问题可能是 heroku 特定的，因为服务器端口是由 heroku 在 'process.env.PORT' 变量中提供的。

我的后端 express/mongoDB 应用程序已部署在 heroku 上。它在每次服务器启动时监听分配的端口 = process.env.PORT 这是一个新端口

前端Vue.js运行在同一个express服务器上，使用axios进行CRUD

我已经尝试过 port = process.env.PORT ||在 Vue 应用程序中为 4000，但始终为 4000，因此请求失败。

有没有办法将端口号从后端 Node.js 环境传递给 Vue.js 组件？

似乎没有在 Vue.js 应用程序中设置 process.env.PORT

从一个示例 Vue 组件中提取

。 . .

import port from '../config';
export default 
  data() 
    return 
      tokens: []
    ;
  ,
  created() 
    let uri = 'http://localhost:' + port + '/tokens';
    this.axios.get(uri).then(response => 
      this.tokens = response.data;
    );
  
;

。 . .

'config.js'

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

export default port;

'server.js' 段

const PORT = 4000;
const port = process.env.PORT || PORT
app.listen(port, () => 
    console.log('Express server running on port ' + port);
);

【问题讨论】：

Node.js passing parameters to client via express render的可能重复

你在使用 vue cli 吗？ process.env 也是节点提供的东西，我不确定如何在客户端访问它。此外，当在客户端进行 axios 调用时，我们所要做的就是提供“/tokens”，我们不需要提供 localhost+port 等，如果客户端/服务器配置设置正确，它们将能够通过相对路径相互通信，因为理想情况下它将在同一主机上运行。

是的，我正在使用 vue cli。您对使用相对路径提出了很好的观点。我会试试的。我使用了完整路径，因为我在一个示例中看到了这一点。我同意客户端无法访问 process.env。

非常感谢 Gowri。那是完美的答案。我看到的许多教程都包含完整路径，因为客户端可能在不同的服务器上运行。

@DesAlbert 很高兴我的建议解决了问题

【参考方案1】：

非常感谢 Gowri 的出色回复，彻底解决了问题。

对于 Vue 的新手并遵循已发布的许多教程，请注意在部署到 heroku 时需要使用相对路径。我的 MEVN 应用现在运行良好。

export default 
  data() 
    return 
      tokens: []
    ;
  ,
  created() 
    let uri = '/tokens';
    this.axios.get(uri).then(response => 
      this.tokens = response.data;
    );
  
;