process.env.variable正在本地开发中工作，但是在部署到heroku之后，在nuxt.js中却无法工作

Question

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

。env文件

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

image.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

enter image description here

已部署输出为

但是如果我像下面这样对URL进行硬编码，脚本

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

然后它在两个地方都工作。现在该位置的URL不是动态的，所以无论我在项目中使用该概念的任何位置，都必须将URL从本地更改为生产。这就是为什么我要使URL动态化，以便在部署期间没有冲突。

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