Vue.js process.env.variable正在本地开发中工作，但在部署到heroku后，它在nuxt.js中不工作

我正在使用nuxt.js并尝试动态显示图像。这就是为什么我在.env文件中使用BASE_URL变量，并根据本地环境中的BASE_URL访问图像文件

.env文件

在image.vue文件中

模板

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

本地输出为

但在部署代码到Heroku后，该代码无法使用env变量

heroku env

部署的输出是

但是如果我把URL硬编码如下 剧本

---

然后它在两个地方都起作用了。现在，URL不是动态的，我必须将URL从本地更改为生产，无论我在项目中使用哪个概念。这就是为什么我想使URL动态化，以便在部署期间不会发生冲突。

通常，您不应该提交

.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

---

我已经像你说的那样添加了，但它仍然不起作用，并且给出了相同的问题。

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

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

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