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

问题描述 投票:0回答:1

我正在使用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;
    }
}

本地输出为image showing with proper url

但是将代码部署到Heroku之后,不能使用env变量。

heroku env

enter image description here

已部署输出为

image is not showing and url is also not proper

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

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

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

vue.js heroku deployment web-deployment nuxt.js
1个回答
0
投票

通常,您不应该提交您的.env文件。在您的Heroku应用程序中的设置下,您可以设置环境变量。

enter image description here

您可以再次定义它们:

BASE_URL = https://pctool.herokuapp.com
DB_HOST = dummy_host_name
DB_USER = dummy_user_name
DB_NAME = dummy_database_name
PASSWORD = dummy_password
© www.soinside.com 2019 - 2024. All rights reserved.