vue.js - process.env.variable 在本地开发中工作，但在部署到 heroku 后，它在 nuxt.js 中不起作用

我正在使用 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 环境

heroku 环境变量

部署的输出是

但是，如果我像下面的脚本那样硬编码 URL

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

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

标签： vue.jsherokudeploymentweb-deploymentnuxt.js

通常你不应该提交你的.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