我正在使用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
已部署输出为
但是如果我像下面这样对URL进行硬编码,脚本
methods: {
makeImagePath (img_name) {
return "https://pctool.herokuapp.com/product/" + img_name;
}
}
然后它在两个地方都工作。现在该位置的URL不是动态的,所以无论我在项目中使用该概念的任何位置,都必须将URL从本地更改为生产。这就是为什么我要使URL动态化,以便在部署期间没有冲突。