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

Question

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

我的后端Express/MongoDB应用程序已经部署在Heroku上。它侦听分配的端口=process.env.port，这是服务器每次启动时的一个新端口

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

我在Vue应用程序中尝试了port=process.env.port4000，但它始终是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);
});

Answer 1

非常感谢Gowri的出色响应，完全解决了问题

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

我该如何承认和赞扬高瑞？我是StackOverflow的新手。

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