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

【问题标题】：process.env.variable is working in local development but after deploying to heroku its not working in nuxt.jsprocess.env.variable 在本地开发中工作，但在部署到 heroku 后，它在 nuxt.js 中不起作用
【发布时间】：2020-03-17 08:28:13
【问题描述】：

我正在使用 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 后，环境变量无法使用。

heroku 环境

heroku env veariables

部署的输出是

但是如果我像下面这样硬编码 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】：

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

【讨论】：

我已经像你说的那样添加了，但它仍然无法正常工作并出现同样的问题。
我遇到了同样的问题，它们被添加到那里但在构建阶段不是红色

【解决方案2】：

终于想通了。如果你想在客户端访问 .env 变量，你需要在 Heroku Config Vars 设置中定义它们，但是你还需要在你的 nuxt.config.js 文件中添加它，例如：

publicRuntimeConfig: {
    baseUrl: process.env.BASE_URL,
    originHeader: process.env.ORIGIN_HEADER
}

然后您就可以像这样访问它们：this.$config.baseUrl

当然，请确保不要以这种方式公开任何私有变量，如 API 密钥或其他任何东西，因为这些是客户端的，因此是公开的。干杯！

【讨论】：