Как я могу применить сгенерированный Heroku порт сервера к моему внешнему приложению Vue.js?

Question

Эта проблема похожа на более общий вопрос связи между сервером и клиентом, однако проблема, вероятно, специфична для heroku, поскольку порт сервера предоставляется heroku в переменной process.env.PORT.

Мое приложение back-end express / mongoDB было развернуто на heroku. Он прослушивает назначенный порт = process.env.PORT, который является новым портом при каждом запуске сервера

Внешний интерфейс Vue.js работает на том же экспресс-сервере и использует axios для CRUD

Я пробовал port = process.env.PORT || 4000 в приложении Vue, но всегда 4000, поэтому запрос не выполняется.

Есть ли способ передать номер порта из серверной среды Node.js компонентам Vue.js?

Похоже, что process.env.PORT не установлен в приложении Vue.js

Выписка из образца компонента 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;
    });
  }
};