在 Heroku 中访问 Vue 应用程序中的环境变量答案

【问题标题】：Access to environment variables in Vue app in Heroku在 Heroku 中访问 Vue 应用程序中的环境变量
【发布时间】：2020-12-30 01:47:04
【问题描述】：

我在 Vue 中为前端构建一个应用程序，在后面为 Node 构建一个应用程序，并且我正在将环境变量用于私有 API 密钥。 .env 文件位于我的全局项目的根目录中，我在本地使用 Dotenv-Webpack 在我的前面访问它们。

本地一切正常，但是当我在 Heroku 中部署应用程序时，变量是 undefined

这是我项目的结构

client
  -> public
  -> src
     -> components
     -> assets
     ...
  ...
routes
services
tests
...
.env

这是我的 vue.config.js 的配置

const path = require("path");
const Dotenv = require("dotenv-webpack");

module.exports = {
  transpileDependencies: ["vuetify"],
  outputDir: path.resolve(__dirname, "../public"),
  devServer: {
    proxy: "http://localhost:5000"
  },
  configureWebpack: {
    plugins: [
      new Dotenv({
        path: "../.env", // load this now instead of the ones in '.env'
        systemvars: true
      })
    ]
  }
};

有人有想法吗？提醒一下，它可以在本地访问我的组件中的 .env，但不能在我在 Heroku 中部署应用程序时访问

【问题讨论】：

标签： node.js heroku webpack environment-variables

【解决方案1】：

1 - 你需要在 heroku 中定义你的环境变量。看一下这个 https://devcenter.heroku.com/articles/config-vars

2- 不要以任何方式提交您的 .env 文件。

3- heroku 不使用您在本地使用的 .env 文件。因此配置中的路径属性无效。

4- 保留systemvars : true，因为它将加载所有系统变量，即您在 heroku 仪表板/CLI 中定义的环境变量

【讨论】：

它不起作用。当我尝试访问项目根目录下的环境变量（背面的 .env）时，Vue 应用程序中仍然有一个 undefined
您是否将 .env 文件中存在的相同变量定义为 heroku 变量？
是的，我的 .env 文件和 heroku vars 之间的 vars 完全相同
等等。你有没有说我正在使用 Dotenv-Webpack 在我的前面访问它们。？您无法在非 nodejs 环境中访问process.env。 heroku 它是生产环境，提供给客户端的前端没有环境变量，没有 .env 文件，没有 nodejs 进程。 @tboll
@tboll，私有 API 密钥永远不应该在前端使用。他们将暴露给打开您网站的任何人。仅在后端使用它们。如果这回答了你的问题。然后批准我的回答。谢谢