Question

此问题类似于服务器与客户端之间进行通信的更一般的问题，但是该问题可能是特定于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);
});

Answer 1

非常感谢Gowri的出色回答，完全解决了该问题

对于Vue的新手来说，他们遵循已发布的许多教程，请注意在部署到heroku时需要使用相对路径。我的MEVN应用现在可以正常运行了。

我如何承认和赞扬Gowri？我是Stackoverflow的新手。

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

如何将Heroku生成的服务器端口应用于前端Vue.js应用？

1 个答案: