Docker VueJS&；网页包：无法从已建项目访问环境变量

我正在使用vuejs前端和nodejs后端开发一个应用程序。我的前端向后端发出API https请求。我已经用vue cli和webpack启动了我的projet。 我需要从env变量（backend_url）获取后端API url。 因为我使用的是webpack，所以我在config/prod.env.js中添加了这一行：

module.exports = {
  NODE_ENV: '"production"',
 -> BACKEND_URL: JSON.stringify(process.env.BACKEND_URL)
}

它使用webpack dev server在开发模式下完美地工作。我通过docker compose文件传递环境变量：

environment:
            - BACKEND_URL=https://whatever:3000

但是当我运行build时，我使用nginx来服务静态文件（但是使用visualstudio代码实时服务器扩展时问题是一样的）。我发送BACKEND_URL env var的方式与以前相同。现在的问题是process.env.BACKEND_URL在应用程序中未定义（但在容器中定义）！！因此，我无法进行后端http调用：( 我正在努力寻找问题，请不要对回答粗鲁。谢谢你，它们没有被“翻译”在构建期间，这就是发生在您身上的情况。在节点环境中，当您请求

process.env

时，它将显示系统中可用的所有环境变量，这是正确的。但是web应用程序在执行时无法访问

process.env

。您需要一种在构建期间转换这些变量的方法

为了实现这一点，你必须使用它。它在构建期间翻译任何东西，并在另一个东西所在的地方编写一个神奇的字符串

使用您自己的示例：

module.exports = {
  NODE_ENV: '"production"',
  BACKEND_URL: JSON.stringify(process.env.BACKEND_URL)
}

如果您在构建期间执行此操作，而没有DefinePlugin，webpack将不知道如何处理它，它将是一个简单的字符串

如果使用DefinePlugin：

new webpack.DefinePlugin({
  "process.env.BACKEND_URL": JSON.stringify(process.env.BACKEND_URL)
});

这样做，您就允许webpack在构建期间翻译此内容。

试一试：

如果我正确理解了您的问题，那么您正在使用nginx为一个webpack包提供服务，并尝试从该包访问一个环境变量

不幸的是，它不是这样工作的。您的JS文件无法访问环境，因为它是一个已交付给客户端的资源。我提出了一个解决方案，该解决方案还可以在容器启动时创建的单独JS文件中随捆绑包一起交付这些环境变量。

来自VueJS文档：

在客户端代码中使用Env变量 只有以

VUE\u APP\uu

开头的变量将通过webpack.DefinePlugin静态嵌入到客户端包中。您可以在应用程序代码中访问它们：

console.log(process.env.VUE_APP_SECRET)

在生成过程中，process.env.VUE_APP_SECRET将替换为相应的值。如果VUE_APP_SECRET=SECRET，则将替换为“SECRET”

---

因此，在您的情况下，下面应该可以解决这个问题。在我的项目中，我曾经遇到过同样的问题，我从vue/cli和

vue创建项目开始…

VUE_APP_BACKEND_URL=https://whatever:3000

---

我认为您需要在.env文件中保留env变量。您可以拥有

url.env

，其中包含

后端的内容\u url=https://whatever:3000

然后在docker compose中添加一行

env\u文件：-url.env

。看看这是否有帮助。docker compose的格式不太正确。您可能知道它是如何进行的。谢谢您的帮助反馈。问题不在这里：当我输入一个带有docker exec/bin/bash和printenv的容器时，后端的URL就在那里。问题是webpack编译的项目无法再读取env var。谢谢，你的回答帮助我理解了发生的事情。我实际上拥有与你建议的完全相同的语法。据我所知，通过doing此网页包仅在构建期间使用env var值。因此，如果后端URL发生更改，我无法让前端知道，只能重新构建我的应用程序以将更改考虑在内。如果我的应用程序能够在每次向后端发出请求之前读取env var，我会很高兴。不，这是不可能的，它们运行在不同的“环境”中，因此在网页上无法获取与问题完全无关的process.env。请解释这与问题“完全无关”的原因？@ZBecause此问题是经典的“我无法从静态html在运行时访问env变量”：