process.env.variable работает в локальной разработке, но после развертывания на heroku он не работает в nuxt. js

Question

Я использую nuxt. js и пытаюсь динамически показывать изображения. Вот почему я использую переменную BASE_URL внутри файла .env и обращаюсь к файлам изображений в соответствии с BASE_URL в своей локальной среде.

.env file

BASE_URL = https://pctool.herokuapp.com
DB_HOST = dummy_host_name
DB_USER = dummy_user_name
DB_NAME = dummy_database_name
PASSWORD = dummy_password

в изображении. vue файл

шаблон

 <img class="pic-0" :src="makeImagePath(product.image[0])"/>

скрипт

methods: {
    makeImagePath (img_name) {
      return process.env.BASE_URL + "/product/" + img_name;
    }
}

Локальный вывод

Но после развертывания код в Heroku не работает с переменной env.

heroku env

heroku env veariables

Развернутый вывод:

Но если я сделаю URL-адрес жестко закодированным, как показано ниже, скрипт:

methods: {
    makeImagePath (img_name) {
      return  "https://pctool.herokuapp.com/product/" + img_name;
    }
}

Тогда он будет работать как мест. Теперь в этой позиции URL-адрес не является динамическим c, я должен изменить URL-адрес с локального на рабочий, где бы я ни использовал эту концепцию в своем проекте. Вот почему я хочу сделать URL-адрес динамическим c, чтобы при развертывании не возникало конфликтов.

Answer 1

Как правило, вы не должны фиксировать ваш .env файл. В вашем приложении Heroku в настройках вы можете установить переменные окружения.

Там вы можете определить их снова:

BASE_URL = https://pctool.herokuapp.com
DB_HOST = dummy_host_name
DB_USER = dummy_user_name
DB_NAME = dummy_database_name
PASSWORD = dummy_password